@charset "UTF-8";

/*!
Theme Name: Suzunoya
Description: 鈴乃屋
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*
 my-custom.css
*/
@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');
/*フロント固定ページのタイトルを非表示*/

/*フロント固定ページのシェアボタンを非表示*/

/*フロント固定ページのフォローボタンを非表示*/

/*フロント固定ページの投稿日を非表示*/

/*フロント固定ページの更新日を非表示*/

/*フロント固定ページの投稿者名を非表示*/
.home .entry-title,
.home .sns-share,
.home .sns-follow,
.home .date-tags,
.home .author-info {
  display: none;
}

.main {
  padding: 0;
}

.entry-content {
  margin-top: 0;
}

.content {
  margin-top: 0;
}

.date-tagsx {
  display: none;
}

.wrap {
  max-width: auto;
  width: auto;
}

.slider-contents {
  margin-top: 0;
  margin-bottom: 0;
}

.entry-content>*,
.demo .entry-content p {
  margin-top: 0;
}

.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  background-color: transparent;
  margin: 0;
  padding-left: 0;
}

.far.fa-file,
.fas.fa-home {
  display: none;
}

br.pc-indent {
  display: block;
}

br.mobile-indent {
  display: none;
}

.header-container,
.main,
.sidebar,
.footer {
  background-color: transparent;
}

.header-container-in.hlt-top-menu {
  padding: 9px 2em;
  background
}

/* サイト全体 */

div,
p,
h1,
h2 {
  padding: 0;
  margin: 0;
}

body {
  background: #303136;
}

section {
  color: #c8c8c8;
  padding: 2em;
  margin: 2.5em 0;
}

.home section {
  padding: 2em;
  margin: 0;
}

table td,
table th {
  padding: 1em;
}

section p {
  font-size: 16px;
  padding: 2em;
}

.entry-title {
  font-size: 28px;
  color: #c8c8c8;
  text-align: center;
  margin: 1em 0;
  padding: 2em;
  line-height: 1.3;
  background-image: url("https://suzunoya.tokyo/wp-content/uploads/2020/10/texture_01.jpg");
}

.entry-content>section {
  margin-top: 5em;
  margin-bottom: 5em;
}

.home .entry-content>section {
  margin-top: 0;
  margin-bottom: 0;
}

.entry-content>section:first-child {
  margin-top: 0;
}

.home .header-container {
  position: fixed;
  color: #c8c8c8;
  z-index: 999;
  width: 100%;
  background-color: transparent;
  background: rgba(0, 0, 0, 0);
}

.navi {
  background-color: transparent;
}

.navi-in a {
  color: #f5f5f5;
}

.menu-drawer a {
  color: #666;
}

.ms-slide .ms-slide-bgcont img,
.ms-container,
.ms-inner-controls-cont {
  background-color: #000;
  opacity: 0.9;
}

select {
  cursor: pointer;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  border: 1px solid #dee2e6 !important;
  outline: none;
  background: #f5f5f5;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

ol,
ul {
  padding-left: 0;
}

.form-name,
.form-furigana {
  width: 48%;
  margin: 10px 1% 0;
}

.form-textarea,
.form-email {
  width: 98%;
  margin: 10px 1%;
}

.form-name:before,
.form-email:before,
.form-furigana:before,
.form-textarea:before {
  content: '※必須';
  font-size: 10px;
  padding: 7px 15px;
  color: #FF0000;
}

form.wpcf7-form p.contact-description {
  margin-bottom: 5em;
}

form.wpcf7-form span.form-span {
  font-size: 50%;
  width: 100%;
  margin: 0 1%;
}

form.wpcf7-form input,
form.wpcf7-form textarea,
form.wpcf7-form select {
  border: 1px solid #dee2e6;
  border: 1px solid #dee2e6 !important;
  border-radius: 4px;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .04);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .04) !important;
  font-size: 80%;
  background-color: #f8fafa;
  margin-bottom: 1em;
}

form.wpcf7-form input {
  height: auto;
}

form.wpcf7-form input.wpcf7-submit {
  position: relative;
  display: block;
  color: #FFF;
  background-color: #991129;
  margin: 1em;
  padding: 0.5em;
  text-decoration: none;
  line-height: 64px;
  transition: all 0.3s;
  font-size: 18px;
}

.wpcf7-submit::before,
.wpcf7-submit::after {
  content: '';
  position: absolute;
  transition: all 0.3s;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.wpcf7-submit::before {
  left: 4px;
  z-index: 1;
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(0.1, 1);
}

.wpcf7-submit:hover::before,
.wpcf7-submit.hover::before {
  opacity: 1;
  transform: scale(1, 1);
}

.wpcf7-submit::after {
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.wpcf7-submit:hover::after,
.wpcf7-submit.hover::after {
  transform: scale(1, .1);
  opacity: 0;
}

div.wpcf7 .ajax-loader {
  display: none;
}

.one-clm {
  flex-grow: 1;
}

.two-clm {
  flex-grow: 0.5;
}

footer {
  color: #c8c8c8;
}

footer div.foot-contents {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

footer div.foot-contents .foot-image,
footer div.foot-contents .foot-text dt {
  flex-basis: 35%;
  /* flex-basis: 20%; */
}

footer div.foot-contents .foot-image img {
  height: 150px;
  display: flex;
  justify-content: center;
  object-fit: contain;
}

footer div.foot-contents .foot-text,
footer div.foot-contents .foot-text dd {
  flex-basis: 70%;
}

footer div.foot-contents .foot-text dl {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
}

/* モバイルメニュー */
HTML CSS JSResult EDIT ON

/*　ハンバーガーボタン　*/
ul.mobile-header-menu-buttons {
  z-index: 10 !important;
}

.hamburger {
  display: block;
  position: relative;
  right: 0;
  top: 0;
  width: 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
  transition: 0.5s all;
}

.hamburger img {
  margin: auto;
  transform-origin: center center;
  transition: all 1s ease-in 0s;
  -webkit-transform-origin: center center;
  -webkit-transition: all 1s ease-in 0s;
}

/* ナビ開いてる時のボタン */
.hamburger.active img {
  transform: rotate3d(0, 1, 0, 720deg);
  -webkit-transform: rotate3d(0, 1, 0, 720deg);
}

.navi-in a:hover {
  background-color: transparent;
  transition: all 0.3s ease-in-out;
}

.navi-in a:hover .item-label {
  color: #c4c4c4 !important;
  transition: all 0.3s ease-in-out;
}

.navi-in>ul li,
.navi-in>ul .sub-menu li {
  width: 150px;
}

.navi-in>ul .sub-menu {
  background-color: transparent;
  min-width: 150px;
  text-align: center;
}

#navi-menu-content {
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  color: #45699A;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  transform: translateY(-100%);
  transition: all 0.6s;
  width: 100%;
  max-width: 100%;
  height: auto;
}

#navi-menu-content ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

#navi-menu-content ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  border-bottom: 1px solid #fff;
}

#navi-menu-content ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

#navi-menu-content ul li:hover {
  background: #ddd;
}

#navi-menu-content ul li a {
  display: block;
  padding: 1em 0;
  text-decoration: none;
}

/* このクラスを、jQueryで付与・削除する */
#navi-menu-content.active {
  transform: translateY(0%);
  top: 50px;
}

.mobile-menu-buttons .menu-button {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-content: center;
}

.navi-menu-button.menu-button {
  background-color: #303136;
  color: #FFF;
}

.mobile-header-menu-buttons {
  z-index: 10 !important;
  justify-content: space-between !important;
}

.navi-footer-in a:hover {
  background-color: #777;
}

.tabContents {
  display: none;
}

.tabContents.active {
  display: block;
}

/* GooleMaps */
.googlemaps p {
  padding: 0;
  margin: 0;
}

.googlemaps iframe,
.googlemaps object,
.googlemaps embed {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

/* トップページ */
.home h2.section-title {
  text-align: center;
  position: relative;
  border-bottom: double 0.5px #C59900;
}

a.button-link {
  position: relative;
  display: block;
  text-align: center;
  max-width: 300px;
  background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 17%, #fefeb2 27%, #fafad6 30%, #fefeb2 33%, #e1ce08 43%, #b8751e 100%);
  color: #333;
  margin: 1em auto;
  padding: 0.5em;
  text-decoration: none;
  line-height: 32px;
  transition: all 0.3s;
}

section.slider-section {
  padding: 0;
}

.home section.about-section {
  text-align: center;
  background-image: url("https://suzunoya.tokyo/wp-content/uploads/2020/10/texture_01.jpg");
}

.home section.menu-section {
  padding: 0;
}

.home section.menu-section img {
  width: 48%;
  margin-top: 16px;
}

.home section.menu-section img:first-child,
.home section.menu-section .slide.scroll-fade {
  width: 100%;
  margin: 0;
}

.home section.menu-section .flex {
  display: flex;
  gap: 24px;
  margin: 24px;
}

.home section.menu-section>div {
  display: flex;
  flex-wrap: nowrap;
  padding: 0;
  background-image: url("https://suzunoya.tokyo/wp-content/uploads/2020/10/texture_01.jpg");
}

.home section.menu-section div:nth-child(2n+1) .left-container,
section.menu-section div:nth-child(2n) .right-container {
  display: flex;
  align-items: center;
  flex-basis: 60%;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4%;
}

.home section.menu-section div:nth-child(2n+1) .right-container,
section.menu-section div:nth-child(2n) .left-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-basis: 40%;
  padding: 2em;
}

.home section.menu-section div:nth-child(2n+1) .right-container *,
section.menu-section div:nth-child(2n) .left-container * {
  flex-basis: 100%;
}

.home section.contact-section {
  text-align: center;
  position: relative;
  background-image: url("https://suzunoya.tokyo/wp-content/uploads/2020/10/top-backgroud_01.jpg");
}

.home section.contact-section:before {
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0, 0, 0, 0.4);
  /* 自由に位置指定 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

.home section.contact-section p {
  position: relative;
}

.home section.access-section {
  padding: 0;
}

.home section.access-section div.googlemaps iframe {
  width: 100%;
}

.home section.access-section ul.tab {
  width: 80%;
  margin: auto;
  margin-bottom: 1.5em;
  padding: 0;
  list-style: none;
  text-align: center;
}

.home section.access-section ul.tab a {
  color: #c8c8c8;
}

/* .home section.sns-section,.home section.product-section{
  width: 50%;
  float: left;
}
.home section.sns-section,.home section.product-section{
  width: 50%;
  float: left;
} */
.home section.sns-section p {
  text-align: center;
}

/* 店舗案内 */
section.greeting-section h2.section-title,
section.form-section h2.section-title,
section.product-section h2.section-title {
  text-align: center;
  position: relative;
  border-bottom: double 0.5px #C59900;
}

section.greeting-section.subpage,
section.company-section.subpage,
section.ship-section.subpage,
section.form-section.subpage,
section.product-section.subpage {
  width: 80%;
  max-width: 1200px;
  margin: auto;
}

section.greeting-section .greeting-contents {
  display: flex;
  flex-wrap: wrap;
  margin: 1em;
  justify-content: space-between;
  align-items: center;
}

section.greeting-section .greeting-contents div {
  display: flex;
  align-content: center;
  align-items: flex-start;
}

section.greeting-section .greeting-contents .left-container,
section.greeting-section .greeting-contents .right-container {
  flex-basis: 50%;
}

section.company-section.subpage dl {
  border: solid 0.5px #C59900;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
}

section.company-section.subpage dt,
section.company-section.subpage dd {
  margin: 0;
  padding: 1em;
}

section.company-section.subpage dl dt {
  flex-basis: 30%;
  border-right: solid 0.5px #C59900;
  border-top: solid 0.5px #C59900;
}

section.company-section.subpage dl dd {
  flex-basis: 70%;
  border-bottom: solid 0.5px #C59900;
}

section.company-section.subpage dl dt:first-child {
  border-top: none;
}

section.company-section.subpage dl dd:last-child {
  border-bottom: none;
}

/* お品書き */
section.menu-section.subpage {
  width: 80%;
  max-width: 1000px;
  margin: auto;
  color: #000;
  background-image: url('https://suzunoya.tokyo/wp-content/uploads/2020/10/texture_02.jpg');
  background-size: auto;
}

section.menu-section.subpage p {
  padding: 1em;
}

section.menu-section.subpage p span {
  font-size: 1.3em;
  font-weight: bold;
  color: #800000;
}

section.menu-section.subpage p span.course-drink {
  color: #daa520;
}

section.menu-section table tr {
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

section.menu-section table td {
  display: block;
}

section.menu-section table td.column-1 {
  color: #800000;
  background-color: transparent;
  font-weight: bold;
  padding-bottom: 0;
  order: 1;
  flex-basis: calc(35% - 20px);
}

section.menu-section table td.column-2 {
  background-color: transparent;
  padding-bottom: 0;
  order: 2;
  flex-basis: calc(15% - 20px);
  text-align: right;
}

section.menu-section table td.column-3 {
  flex-basis: calc(50% - 20px);
  font-size: 0.8em;
  padding-top: 0;
  order: 5;
}

section.menu-section table td.column-4 {
  color: #800000;
  background-color: transparent;
  font-weight: bold;
  padding-bottom: 0;
  order: 3;
  flex-basis: calc(35% - 20px);
}

section.menu-section table td.column-5 {
  background-color: transparent;
  padding-bottom: 0;
  order: 4;
  flex-basis: calc(15% - 20px);
  text-align: right;
}

section.menu-section table td.column-6 {
  flex-basis: calc(50% - 20px);
  font-size: 0.8em;
  padding-top: 0;
  order: 6;
}

section.menu-section table td,
section.menu-section table th {
  border-top: none;
}

section.menu-section .accordion-button {
  padding: 0.5em 1.25em 0.5em 1.25em;
}

section.form-section.subpage form.wpcf7-form input.wpcf7-submit {
  margin: 0;
}

section.form-section.subpage form.wpcf7-form a {
  color: #333;
  padding: 0.5em;
  margin-right: 1em;
  cursor: pointer;
  text-decoration: none;
  background-color: #FFA500;
  border: 1px solid #dee2e6 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .04) !important;
}

section.form-section.subpage form.wpcf7-form a#menu-reset {
  background-color: #f1f1f1;
}

section.form-section.subpage form.wpcf7-form textarea {
  background-color: #D8D6D5;
}

section.form-section.subpage h2.section-title {
  text-align: center;
}

section.product-section.subpage h2.section-title {
  text-align: center;
}

.accordion-button {
  position: relative;
}

.accordion-button:before {
  content: "";
  position: absolute;
  left: 0;
  top: 38%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 8px;
  height: 8px;
  border-top: solid 2px #000;
  border-right: solid 2px #000;
  transform: rotate(-45deg);
}

.accordion-button.open:before {
  transform: rotate(135deg);
  top: 45%;
}

.accordion-button {
  position: relative;
  margin: 0 auto;
  background-color: #45699A;
  font-size: 1em;
  font-weight: normal;
  cursor: pointer;
}

section.menu-section.subpage .shop-image {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

section.menu-section.subpage .shop-image img {
  width: calc(25% - 20px);
}

/* --- ここから：今回追加するコース追加部分のCSS --- */

/* リスト全体の囲い（必要に応じて調整） */
.menu-contents {
  padding: 0 1em 1em 1em;
}

/* コースリスト（ol）の設定 */
.menu-contents ol {
  padding-left: 0;
  /* 左余白は個別に調整するためリセット */
  margin-bottom: 2em;
  list-style: none;
  /* デフォルトの数字（ドット付き）を消す */
  counter-reset: course-count;
  /* カウンターをセット */
}

/* リストアイテム（li）の文字サイズ調整 */
.menu-contents ol li {
  font-size: 16px;
  /* PC時の文字サイズ */
  line-height: 1.8;
  /* 行間 */
  position: relative;
  /* 数字の位置調整用 */
  padding-left: 1.5em;
  /* 数字が入るスペースを確保 */
}

/* 数字（ドットなし）を表示するための擬似要素 */
.menu-contents ol li::before {
  counter-increment: course-count;
  /* カウンターを進める */
  content: counter(course-count);
  /* 数字のみ表示（ドットなし） */
  position: absolute;
  left: 0.2em;
  /* 位置調整 */
  top: 0;
}

/* スマートフォン表示時の調整（768px以下） */
@media screen and (max-width: 768px) {

  /* スマホ時の全体の幅調整 */
  section.menu-section.subpage {
    width: 95%;
  }

  /* コース内容文字サイズ（スマホ時14px） */
  .menu-contents ol li {
    font-size: 14px;
  }
}




/* 地方発送 */
section.ship-section a {
  color: #c8c8c8;
}

/* お問い合わせ */
section.contact-section.subpage,
section.company-section.subpage {
  width: 80%;
  max-width: 1200px;
  margin: auto;
}

section.contact-section.subpage p {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: stretch;
}

/* 予約ページ */
div.rtb-booking-form {
  padding: 2em;
  color: #FFF;
}

.rtb-booking-form fieldset {
  padding: 1em;
}

.rtb-booking-form input {
  width: 100%;
  max-width: 100%;
}

.rtb-booking-form button {
  position: relative;
  display: block;
  color: #FFF;
  background-color: #666;
  margin: 1em;
  padding: 0.5em;
  text-decoration: none;
  line-height: 64px;
  transition: all 0.3s;
  font-size: 18px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {

  /*必要ならばここにコードを書く*/
  #header-container {
    display: none;
  }
}

/*834px以下*/
@media screen and (max-width: 834px) {

  main.main,
  div.sidebar {
    padding: 0;
    margin: 10px 0;
    border-width: 0;
  }

  section {
    padding: 2em;
    margin: 0;
  }

  .home section.menu-section>div {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .home section.menu-section div:nth-child(2n+1) .right-container,
  section.menu-section div:nth-child(2n) .left-container {
    flex-basis: 100%;
    order: 2;
  }

  /*必要ならばここにコードを書く*/
  .home section.menu-section div:nth-child(2n+1) .left-container,
  section.menu-section div:nth-child(2n) .right-container {
    flex-basis: 100%;
    order: 1;
  }

  /* 店舗案内 */
  section.greeting-section .greeting-contents:nth-child(4n) {
    flex-direction: column-reverse;
  }

  section.greeting-section .greeting-contents .left-container,
  section.greeting-section .greeting-contents .right-container {
    flex-basis: 100%;
  }

  /* お品書き */
  section.menu-section table td.column-1 {
    flex-basis: calc(75% - 20px);
    order: 1;
  }

  section.menu-section table td.column-2 {
    flex-basis: calc(25% - 20px);
    order: 2;
  }

  section.menu-section table td.column-3 {
    flex-basis: 100%;
    order: 3;
  }

  section.menu-section table td.column-4 {
    flex-basis: calc(75% - 20px);
    order: 4;
  }

  section.menu-section table td.column-5 {
    flex-basis: calc(25% - 20px);
    order: 5;
  }

  section.menu-section table td.column-6 {
    flex-basis: 100%;
    order: 6;
  }

  section.menu-section.subpage .shop-image img {
    width: calc(50% - 20px);
  }

  .home section.sns-section,
  .home section.product-section {
    width: 100%;
    float: none;
  }

  .footer-widgets {
    display: block !important;
  }
}

/*480px以下*/
@media screen and (max-width: 480px) {
  section {
    width: 100% !important;
  }

  .home section {
    padding: 0.8em;
  }

  section.slider-section {
    padding: 0;
  }

  /*必要ならばここにコードを書く*/
  section p {
    font-size: 14px;
    padding: 0.8em;
  }

  section.form-section.subpage form.wpcf7-form a {
    font-size: 14px;
  }
}


.pc_only {
  display: block;
}

.sp_only {
  display: none;
}

@media (max-width:767px) {
  .pc_only {
    display: none;
  }

  .sp_only {
    display: block;
  }
}

/* 20240610_トップページ＞Instagram設置 */

.sns-contents {
  max-width: 1024px;
  margin-inline: auto;
}