@charset "utf-8";

:root {
  --darkfont-color: #333;
  --font-color: #fff;
  --lightgray-color: #8D8D8D;
  --background-color: #262626;
  --base-color: #F1F2F3;
  --sub-color: #70706F;
  --border-color: #D9D9D9;
  --subblack-color: #251E1C;

  --default-font: "Noto Serif JP", serif;
  --sub-font: "Noto Sans JP", sans-serif;
}


/* **********************************
タブレット大
************************************* */
@media screen and (max-width:960px) {

  /* -----------------------------------
ハンバーガーメニュー
-------------------------------------- */
  .hamburger {
    width: 50px;
    height: 50px;
    gap: 9px;
  }

  /* アクティブ */
  .hamburger.active span:nth-child(1) {
    width: 28px;
    transform: rotate(45deg) translate(4px, 4px);
  }

  .hamburger.active span:nth-child(2) {
    width: 28px;
    transform: rotate(-45deg) translate(4px, -5px);
  }

  /* -----------------------------------
トップ
-------------------------------------- */
  .top {
    width: 100%;
    height: auto;
    display: block;
  }

  .top-wrap {
    width: 100%;
    height: auto;
    padding-top: 0;
    flex-flow: column;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 50px;
  }

  .top-header {
    width: 100%;
    gap: 30px;
  }

  .top-header h1 {
    width: 120px;
  }

  /* .mv {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    margin: 0 auto;
  } */
  .mv {
    position: relative;
    width: 100%;
    height: 90vh;
  }

  .sp-logo {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
    width: 80px;
  }

  .sp-logo img {
    width: 100%;
    height: auto;
  }

  /* .mv iframe {
    width: 140%;
    height: 140%;
  } */
  /* iframe[src*="youtube.com"],
  iframe[src*="youtube-nocookie.com"] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    aspect-ratio: 9 / 16;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: none;
  } */

  /* -----------------------------------
共通要素
-------------------------------------- */
  .about,
  .cuisine-main {
    display: block;
  }

  .common-cont {
    margin-bottom: 100px;
  }

  /* -----------------------------------
京懐石　東山について about
-------------------------------------- */
  .about {
    margin-top: 15rem;
    margin-bottom: 15rem;
  }

  /* -----------------------------------
お料理 cuisine
-------------------------------------- */
  .cuisine-bg {
    padding-top: 15rem;
  }

  .cuisine-txtBox {
    flex-flow: column;
    flex-direction: column-reverse;
    gap: 10%;
  }

  .cuisine-mainTxt {
    flex: auto;
  }

  /* 京を味わう */
  .cuisine-subtitle {
    flex: auto;
    display: block;
    width: 100%;
    margin-bottom: 100px;
  }

  .cuisine-subtitle h3 {
    flex-flow: column;
    gap: 0;
    font-size: 3.2rem;
    font-weight: 500;
    text-orientation: unset;
    writing-mode: unset;
    letter-spacing: 0.2em;
  }

  .cuisine-subtitle h3 span:last-child {
    margin-top: 0;
  }



  /* ------コース------ */
  .cuisine-course {
    margin: 8rem auto 0;
  }

  .course-box {
    padding: 28px 0;
  }

  .course-pic {
    margin-bottom: 20px;
  }

  /* -----------------------------------
料理長 chef
-------------------------------------- */
  .chef {
    margin-top: 20rem;
  }

  .chef-inner {
    flex-flow: column;
    gap: 100px;
    padding: 15rem 0;
  }

  .chef-name {
    flex-flow: row;
    align-items: center;
    gap: 0;
  }

  /* 名前と写真を1：1に */
  .chef-nameInner {
    flex: 1;
  }

  .chef-namePic {
    flex: 1;
  }

  /* 縦写真とテキストを入れ替え */
  .chef-item {
    flex-direction: row-reverse;
    gap: 5%;
  }

  .chef-txt {
    flex: 7;
    padding: 0;
  }

  .chef-pic {
    flex: 3;
  }

  /* -----------------------------------
お知らせ news
-------------------------------------- */

  /* --------------------------------------
アクセス access
----------------------------------------- */
  .access {
    margin: 15rem auto;
  }

  .access-content {
    flex-flow: column;
    width: 100%;
    gap: 50px;
  }

  /* ----------------------------------
footer
------------------------------------- */
  .ft-logo {
    width: 40%;
  }

  .ft-logo img {
    width: 100px;
    height: auto;
    margin: 0 auto;
  }

  .ft-info {
    width: 60%;
  }

  /* ===================================
下層ページ共通
====================================== */
  /* 共通MV */
  .under_mv {
    width: 100%;
    flex-flow: column;
    gap: 3rem;
    margin: 0 auto;
  }

  .under_mvTl {
    width: auto;
  }

  .under_mvTl h1 {
    text-align: center;
    font-size: 3.6rem;
  }

  .under_mvTl h1 br {
    display: none;
  }

  .under_mvTl p {
    text-align: center;
    font-size: 2.4rem;
  }

  .under_mvPic {
    width: 70%;
  }

}

/* **********************************
タブレット中
************************************* */
@media screen and (max-width:768px) {
  /* -----------------------------------
  固定予約ボタン ポップアップ 全ページ共通
  -------------------------------------- */
  .popup-content {
    padding: 20px;
    font-size: 1.2rem;
  }

  .popup-content h2 {
    font-size: 2rem;
  }

  .popup-content ul {
    font-size: 1.2rem;
    margin: 3rem 0;
  }

  .popup-reserve-btn {
    padding: 10px 30px;
    font-size: 1.2rem;
  }

  .close-btn {
    font-size: 2rem;
    top: 5px;
    right: 10px;
  }

  .sticky-btn {
    bottom: 15px;
    right: 15px;
    width: 180px;
  }

  .sticky-btn button {
    font-size: 1.2rem;
    padding: 12px 0;
  }
  /* -----------------------------------
共通要素
-------------------------------------- */
  .common-upright {
    font-size: 1.3rem;
  }

  .common-cont {
    margin-bottom: 50px;
  }

  /* テキスト郡 */
  .common-txt {
    gap: 50px;
  }

  .common-title {
    font-size: 4.8rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 30px;
    letter-spacing: 0;
  }

  /* 英語テキスト */
  .common-pEn {
    font-size: 1.2rem;
  }

  /* 日本語テキスト */
  .common-p {
    font-size: 1.4rem;
  }

  /* -----------------------------------
京懐石　東山について about
-------------------------------------- */
  .about .common-title {
    font-size: 3.2rem;
  }

  .about .common-title span {
    font-size: 2rem;
  }

  /* -----------------------------------
お料理 cuisine
-------------------------------------- */
  .cuisine-mainTxt h4 {
    font-size: 1.8rem;
  }

  .cuisine-subtitle {
    margin-bottom: 50px;
  }

  .cuisine-subtitle h3 {
    font-size: 2.4rem;
  }

  /* -----------------------------------
料理長 chef
-------------------------------------- */
  .chef-nakamura {
    font-size: 2.8rem;
  }

  .chef-nakamura span {
    font-size: 1.4rem;
  }

  .chef-txt .common-p {
    line-height: 2;
  }

  /* -----------------------------------
  トップ　お知らせ news
  -------------------------------------- */
  .news {
    width: 90%;
    padding: 10rem 0;
  }

  .post-container {
    width: 90%;
    --post-gap: 5%;
    margin: 50px auto 0;
  }

  .post-title h4 {
    font-size: 1.4rem;
  }

  /* --------------------------------------
  お知らせ内容モーダル動作設定
  ----------------------------------------- */
  .post-thmb img {
    aspect-ratio: 1 / 1;
  }

  .open-title {
    font-size: 2rem;
  }

  /* --------------------------------------
  アクセス access
  ----------------------------------------- */
  .access-content {
    margin-top: 50px;
  }

  .root h4 {
    font-size: 1.8rem;
  }

  .root div p:first-child {
    font-size: 1.6rem;
  }

  .root div p:last-child {
    font-size: 1.4rem;
  }

  /* --------------------------------------
  footer
  ----------------------------------------- */
  /* コピーライト */
  .ft-copy {
    text-align: center;
    padding: 10px 0 80px;
  }

  /* ===================================
  下層ページ共通
  ====================================== */
  .under_mv {
    margin-top: 3rem;
  }

  .main {
    margin: 10rem auto;
  }

  /* コースページ */
  .page-content .wp-block-group {
    margin: 10rem 0;
  }

  /* ===================================
  お知らせ一覧 news home.php
  ====================================== */
  .news-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  /* ===================================
  お知らせ single
  ====================================== */
  .post-main {
    margin: 5rem auto 10rem;
  }

  .another_single {
    margin-top: 5rem;
  }

  .another_single li {
    width: 50%;
  }

  .another_single ul a {
    font-size: 1.4rem;
  }
}

/* **********************************
タブレット小
************************************* */
@media screen and (max-width:600px) {
  .sticky-btn {
    width: 180px;
    bottom: 5px;
    right: 5px;
  }

  .sticky-btn a {
    font-size: 1.2rem;
  }

  .under-btn {
    width: 180px;
    bottom: 5px;
    right: 5px;
  }

  .under-btn a {
    font-size: 1.2rem;
  }

  .menu-logo {
    width: 80px;
  }

  /* -----------------------------------
トップ
-------------------------------------- */
  .top-header h1 {
    width: 90px;
  }

  /* -----------------------------------
京懐石　東山について about
-------------------------------------- */
  /* .about-pic img:last-child {
    margin-top: -30px;
  } */
  /* -----------------------------------
お料理 cuisine
-------------------------------------- */
  /* ------コース------ */
  .cuisine-course {
    gap: 5%;
    margin: 50px auto 0;
  }

  .course-box {
    padding: 15px 0;
  }

  /* カルーセル */
  .carousel-track {
    --slide-gap: 25px;
    /* 余白変更の際はjsも変更 */
    gap: var(--slide-gap);
  }

  .carousel-item {
    flex: 0 0 calc((100vw - var(--slide-gap)) / 2);
  }

  /* -----------------------------------
料理長 chef
-------------------------------------- */
  .chef-item {
    flex-flow: column;
    gap: 50px;
  }

  .chef-inner {
    gap: 50px;
  }

  .chef-pic {
    position: relative;
    z-index: 2;
    width: 70%;
  }

  .chef-pic::after {
    position: absolute;
    z-index: -1;
    top: 40px;
    left: 15%;
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--lightgray-color);
    border: 1px solid var(--lightgray-color);
  }

  /* -----------------------------------
お知らせ news
-------------------------------------- */

  .post-header h5 {
    padding-left: 20px;
  }

  /* モーダル内側の指定 */
  .modal-container {
    width: 98%;
  }

  .open-cont {
    width: 90%;
  }

  .open-titleBox time {
    font-size: 1.6rem;
  }

  .open-title {
    font-size: 1.6rem;
  }

  .open-txt {
    font-size: 1.4rem;
    padding-bottom: 30px;
  }

  /* ----------------------------------
footer
------------------------------------- */
  .ft-inner {
    flex-flow: column;
    gap: 25px;
    padding: 6rem 0;
  }

  .ft-logo img {
    width: 90px;
    height: auto;
    margin: 0 auto;
  }

  .ft-nav {
    width: 100%;
    border-top: 1px solid #D9D9D9;
    border-left: none;
    padding-top: 20px;
  }

  .ft-info {
    width: 50%;
    padding-right: 0;
  }

  /* ===================================
  下層ページ共通
  ====================================== */
  /* 下層ヘッダー */
  .under_logo {
    width: 60px;
  }

  .under_mvTl h1 {
    font-size: 3.2rem;
  }

  .under_mvTl h1 .sp-br {
    display: block;
  }

  .under_mvTl p {
    font-size: 2rem;
    line-height: 1.8;
  }

  /* 固定ページ内容 */
  .course_main {
    width: 90%;
    margin: 10rem auto;
  }

  /* コースサブタイトル */
  .page-content h2 {
    font-size: 2.8rem;
  }

  .page-content h2 span {
    font-size: 1.6rem;
    line-height: 1;
  }

  /* 季節のタイトル */
  .page-content h3 {
    font-size: 2.8rem;
  }

  .page-content p {
    font-size: 1.4rem;
  }

  .course_main .page-content figure {
    margin-bottom: 30px;
  }

  .page-content .wp-block-group {
    margin: 5rem 0;
  }

  /* ===================================
  404Not Found 404.php
  ====================================== */
  .notfound {
    padding: 8rem 2rem;
  }

  .notfound h1 {
    font-size: 2.8rem;
  }

  .notfound_subtitle {
    font-size: 1.8rem;
  }
}


/* **********************************
スマホ大
************************************* */
@media screen and (max-width:480px) {
  /* -----------------------------------
  固定予約ボタン ポップアップ 全ページ共通
  -------------------------------------- */
  .popup-content {
    padding: 15px;
    font-size: 1.1rem;
  }

  .popup-content h2 {
    font-size: 1.8rem;
  }

  .popup-content ul {
    font-size: 1.1rem;
    margin: 2rem 0;
  }

  .popup-reserve-btn {
    padding: 10px 20px;
    font-size: 1.1rem;
  }

  .sticky-btn {
    width: 160px;
  }

  .sticky-btn button {
    font-size: 1.1rem;
    padding: 10px 0;
  }

  /* -----------------------------------
  京懐石　東山について about
  -------------------------------------- */
  .about {
    width: 80%;
  }

  .about .common-cont {
    gap: 10%;
  }

  /* -----------------------------------
  お料理 cuisine
  -------------------------------------- */
  .cuisine-main {
    width: 80%;
  }

  .cuisine .common-cont {
    gap: 10%;
  }

  .cuisine-mainTxt h4 {
    font-size: 1.8rem;
    line-height: 1.8;
    margin-bottom: 20px;
  }

  /* ------コース------ */
  .cuisine-course {
    flex-flow: column;
    gap: 30px;
  }

  .course-box {
    width: 80%;
    margin: 0 auto;
  }

  /* -----------------------------------
  料理長 chef
  -------------------------------------- */
  .chef-inner {
    width: 80%;
  }

  .chef-name {
    display: block;
  }

  .chef-nameInner {
    margin-bottom: 50px;
  }

  /* ----------------------------------
  footer
  ------------------------------------- */
  .ft-inner {
    padding: 4rem 0;
  }

  .ft-higashiyama {
    flex-flow: column;
    gap: 30px;
  }

  .ft-info {
    width: 90%;
    padding-right: 0;
  }

  .ft-nav ul {
    width: 90%;
  }

  .ft-nav li a {
    line-height: 3;
  }

  /* ===================================
  下層ページ共通
  ====================================== */
  .under_mvTl h1 {
    font-size: 2.4rem;
  }

  .under_mvTl p {
    font-size: 1.6rem;
  }

  /* ===================================
  下層ページ コース
  ====================================== */
  .another_course ul a {
    font-size: 1.2rem;
  }

  .page-content h2 {
    font-size: 2.4rem;
    line-height: 1.2;
  }

  .page-content h3 {
    font-size: 2.4rem;
  }

  /* ===================================
  お知らせ single
  ====================================== */
  .another_single li {
    width: 50%;
  }

  .another_single ul a {
    font-size: 1.2rem;
  }

  /* ===================================
お知らせ一覧 news home.php
====================================== */
  .news-list {
    gap: 20px;
  }

  .news-content h2 {
    font-size: 1.2rem;
  }

  .news-content {
    padding: 10px 0 0 0;
  }

}