@charset "UTF-8";
/* ============================= 共通パーツレイアウト ============================= */
@media all {
   :root {
      --color-main: #412816;
      --color-white: #F4F0E4;
      --color-dark-beige: #C7B38E;
      --color-beige: #CDB484;

      --font-sans: "Noto Sans JP", sans-serif;
      --font-default: "Noto Serif JP", serif;
      --font-accent: "Playball", cursive;
   }

   html,
   body {
      width: 100%;
      overflow-x: hidden;
   }

   body {
      font-family: var(--font-default);
      font-weight: 400;
      color: var(--color-main);
      font-size: 16px;
      line-height: 2;
      letter-spacing: 0;
      background-color: var(--color-white);
      position: relative;
   }

   a {
      transition: opacity .3s;
   }

   a:hover {
      opacity: 0.7;
   }

   img {
      width: 100%;
   }

   .sp,
   .tb,
   .ssp,
   .ham {
      display: none;
   }

   .innerWrap {
      margin: 0 auto;
      width: 100%;
      max-width: 1200px;
   }

   h2.h2_common {
      font-size: 40px;
      line-height: 1;
      margin-bottom: 60px;
      font-weight: 900;
   }
}

/* ============================= 共通ヘッダー・フッター ============================= */
@media all {
   header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1100;
      background-color: var(--color-main);
      color: var(--color-white);
   }

   header .innerWrap {
      height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--color-white);
   }

   header .global-nav ul {
      display: flex;
      align-items: center;
      gap: 24px;
      font-weight: 700;
      font-size: 20px;
      line-height: 1;
   }

   header .logo {
      width: 188px;
   }

   header .header-contents {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 16px;
   }


   header .header-contents>a {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4px;
      background-color: var(--color-white);
      border-radius: 20px;
      padding: 4px 10px;
      font-weight: 700;
      font-size: 20px;
      line-height: 1;
      color: var(--color-main);
   }

   header .header-contents>a::before {
      content: "";
      width: 26px;
      height: 26px;
      background-image: url(../img/icon_tel.svg);
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
   }

   footer {
      background-color: var(--color-main);
      padding: 60px 0;
   }

   footer .innerWrap {
      color: var(--color-dark-beige);
      text-align: center;
      font-size: 40px;
      font-weight: 900;
      line-height: 1.7;
   }
}

/* ============================= トップページ ============================= */
@media all {
   main {
      padding-top: 100px;
   }

   .hero {
      background-image: url(../img/bg_hero.png);
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;

   }

   .hero .innerWrap {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 700px;
   }

   .hero .main-copy {
      color: var(--color-main);
      font-weight: 900;
      font-size: 60px;
      line-height: 1.5;
      text-shadow: 0px 3px 3px #ffffff;
   }

   .message {
      background-color: var(--color-white);
      padding: 24px 0;
   }

   .message .innerWrap {
      display: flex;
      align-items: center;
      gap: calc(100% * (48 / 1200));
   }

   .message .innerWrap>div {
      max-width: 470px;
      width: calc(100% * (470 / 1200));
   }

   .message .innerWrap>p {
      max-width: 682px;
      width: calc(100% * (682 / 1200));
   }

   .message .innerWrap>div>div {
      display: flex;
      flex-direction: column;
      gap: 36px;
   }

   .specialty {
      background-color: var(--color-main);
      padding: 96px 0;
   }

   .specialty h2.h2_common {
      color: var(--color-dark-beige);
      text-align: center;
      margin-bottom: 70px;
   }

   .specialty ul.specialty-list {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 32px;
   }

   .specialty ul.specialty-list>li {
      width: calc((100% - 48px) / 3);
      background-color: var(--color-white);
      font-family: var(--font-sans);
   }

   .specialty ul.specialty-list>li h3 {
      background-color: var(--color-dark-beige);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 24px 8px 32px;
      font-size: 20px;
      font-weight: 700;
      line-height: 1.2;
      gap: 8px;
      margin-bottom: 16px;
   }

   .specialty ul.specialty-list>li h3 span {
      font-size: 50px;
      font-family: var(--font-accent);
      font-weight: 400;
      line-height: 1;
   }

   .specialty ul.specialty-list>li .specialty-img {
      width: calc(100% * (180 / 384));
      margin: 0 auto 16px;
   }

   .specialty ul.specialty-list>li .specialty-txt {
      padding: 0 20px 20px;
      font-weight: 500;
      line-height: 1.8;
   }

   .specialty ul.specialty-list>li ul.specialty-txt {
      display: flex;
      flex-direction: column;
      gap: 16px;
   }

   .specialty .innerWrap>p {
      display: flex;
      justify-content: flex-end;
      font-family: var(--font-sans);
   }

   .specialty .innerWrap>p span {
      display: inline-block;
      background-color: var(--color-white);
      font-size: 20px;
      font-weight: 700;
      padding: 10px;
      line-height: 1;
   }

   .detail {
      background-color: var(--color-white);
      padding: 72px 0;
   }

   .detail .detail-block {
      display: flex;
      align-items: stretch;
   }

   .detail .detail-block2 {
      flex-direction: row-reverse;
   }

   .detail .detail-block>* {
      width: 50%;
   }

   .detail .detail-block>p {
      margin: 0;
   }

   .detail .detail-block>p img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
   }

   .detail .detail-block>div h2.h2_common {
      margin-bottom: 40px;
   }

   .detail .detail-block>div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 16px 0 16px;
   }

   .detail .detail-block>div>*:not(h2) {
      font-family: var(--font-sans);
   }

   .detail .detail-block1>div {
      padding-right: 40px;
   }

   .detail .detail-block2>div {
      padding-left: 40px;
   }

   .detail .detail-block2 ul {
      display: flex;
      flex-direction: column;
      gap: 8px;
   }

   .detail .detail-block2 li {
      display: flex;
      gap: 8px;
      align-items: center;
   }

   .detail .detail-block2 li::before {
      content: "";
      width: 24px;
      height: 22px;
      background-image: url(../img/icon_bread.svg);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
   }

   .menu {
      padding-top: 100px;
      padding-bottom: 120px;
      background-color: var(--color-beige);
   }

   .menu .menu-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 60px;
   }

   .menu .menu-header h2.h2_common {
      margin-bottom: 0;
   }

   .menu .menu-header p {
      background-color: var(--color-main);
      color: var(--color-white);
      padding: 10px;
      line-height: 1;
      font-size: 20px;
      font-weight: 500;
      font-family: var(--font-sans);
   }

   .menu .menu-block {
      margin-bottom: 80px;
   }

   .menu .menu-block h3 {
      margin-bottom: 24px;
      font-size: 40px;
      font-weight: 500;
      font-family: var(--font-sans);
      display: flex;
      gap: 24px;
      line-height: 1;
   }

   .menu .menu-block h3 span {
      font-family: var(--font-accent);
      font-size: 60px;
      font-weight: 400;
      transform: translateY(-0.18em);
   }

   .menu .menu-block ul {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
   }

   .menu .menu-block:last-child {
      margin-bottom: 0;
   }

   .contact {
      background-color: var(--color-white);
      padding: 100px 0;
   }

   .contact .innerWrap {
      text-align: center;
   }

   .contact .innerWrap>p {
      font-family: var(--font-sans);
      line-height: 2;
      margin-bottom: 40px;
   }

   .contact .innerWrap>a {
      width: 100%;
      max-width: 800px;
      background-color: var(--color-dark-beige);
      padding: 16px 0 24px;
      display: inline-block;
      border: 1px solid var(--color-main);
      position: relative;
      font-size: 30px;
      font-weight: 700;
      line-height: 1;
   }

   .contact .innerWrap>a::after {
      content: "";
      width: 100%;
      height: 1px;
      background-color: var(--color-main);
      position: absolute;
      bottom: 8px;
      left: 0;
   }
}




/* ============================= レスポンシブ〜1200px ============================= */
@media all and (max-width:1200px) {

   header .innerWrap,
   footer .innerWrap,
   main>section .innerWrap {
      padding-left: 20px;
      padding-right: 20px;
   }
}

/* ============================= レスポンシブ〜900px ============================= */
@media all and (max-width:900px) {
   .tb {
      display: revert;
   }

   header .header-contents {
      flex-direction: row;
      align-items: center;
      gap: 8px;
   }

   .message {
      padding: 96px 0;
   }

   .message .innerWrap {
      flex-direction: column;
      gap: 24px;
   }

   .message h2.h2_common {
      text-align: center;
   }


   .message .innerWrap>div,
   .message .innerWrap>p {
      max-width: 100%;
      width: 100%;
   }

   .specialty ul.specialty-list {
      flex-direction: column;
      align-items: center;
   }

   .specialty ul.specialty-list>li {
      width: 100%;
      max-width: 400px;
   }

   .specialty .innerWrap>p {
      justify-content: center;
   }

   .detail .detail-block {
      flex-direction: column;
   }

   main>section.detail .innerWrap {
      padding-left: 0;
      padding-right: 0;
   }

   .detail .detail-block1 {
      margin-bottom: 40px;
   }

   .detail .detail-block>* {
      width: 100%;
   }

   .detail .detail-block1>div,
   .detail .detail-block2>div {
      padding-right: 20px;
      padding-left: 20px;
   }

   .menu .menu-header {
      flex-direction: column;
      gap: 16px;
      align-items: flex-start;
   }

   .menu .menu-block ul {
      gap: 8px;
   }
}

/* ============================= レスポンシブ〜768px ============================= */
@media all and (max-width:768px) {
   .pc {
      display: none;
   }

   .sp {
      display: revert;
   }

   header .logo {
      width: 130px;
   }

   header .innerWrap {
      height: 80px;
   }

   main {
      padding-top: 80px;
   }

   .hero {
      background-image: url(../img/bg_hero_sp.png);
   }

   .hero .innerWrap {
      align-items: flex-end;
      height: 500px;
      padding-bottom: 36px;
   }

   .hero .main-copy {
      font-size: 50px;
   }

   h2.h2_common {
      margin-bottom: 40px;
      line-height: 1.3;
   }

   .message {
      padding: 80px 0;
   }

   .message .innerWrap {
      gap: 40px;
   }

   .specialty {
      padding: 80px 0;
   }

   .specialty h2.h2_common {
      margin-bottom: 40px;
   }

   .specialty ul.specialty-list {
      gap: 20px;
      margin-bottom: 20px;
   }

   .detail {
      padding: 80px 0;
   }

   .detail .detail-block1>div,
   .detail .detail-block2>div {
      padding-bottom: 40px;
   }

   .menu .menu-header {
      margin-bottom: 40px;
   }

   .menu .menu-block h3 {
      font-size: 20px;
      gap: 12px;
      margin-bottom: 8px;
   }

   .menu .menu-block h3 span {
      font-size: 32px;
   }

   .menu .menu-block {
      margin-bottom: 40px;
   }

   .menu {
      padding-top: 80px;
      padding-bottom: 80px;
   }

   .contact {
      padding: 80px 0;
   }

   .contact .innerWrap>a {
      line-height: 1.3;
   }

   footer .innerWrap {
      text-align: left;
   }

   footer {
      padding: 80px 0;
   }
}


/* ============================= レスポンシブ〜540px ============================= */
@media all and (max-width:540px) {
   .ssp {
      display: revert;
   }

   header .innerWrap,
   footer .innerWrap,
   main>section .innerWrap {
      padding-left: 12px;
      padding-right: 12px;
   }

   .hero .main-copy {
      font-size: 40px;
   }

   h2.h2_common {
      font-size: 32px;
   }

   header .header-contents {
      gap: 12px;
   }

   header .header-contents>a {
      padding: 8px;
   }

   header .header-contents>a::before {
      width: 20px;
      height: 20px;
   }

   header .header-contents>a span {
      display: none;
   }

   .specialty .innerWrap>p span {
      line-height: 1.3;
      width: 100%;
      max-width: 400px;
      text-align: center;
   }

   .menu .menu-header p {
      line-height: 1.3;
      text-align: center;
   }

   .menu .menu-header {
      align-items: revert;
   }

   .detail .detail-block1>div,
   .detail .detail-block2>div {
      padding-right: 12px;
      padding-left: 12px;
   }


   footer .innerWrap {
      font-size: 28px;
   }
}


/* ============================= ハンバーガーメニュー〜900px ============================= */
@media all and (max-width: 900px) {
   body.is-open {
      overflow: hidden;
   }

   body::after {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.25);
      z-index: 1040;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s ease, visibility 0.4s ease;
   }

   body.is-open::after {
      opacity: 1;
      visibility: visible;
   }

   .ham {
      display: flex !important;
   }

   .hamburger-menu {
      width: 36px;
      height: 29px;
      cursor: pointer;
      z-index: 1110;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 10px;
      position: relative;
   }

   .hamburger-menu .bar {
      width: 36px;
      height: 3px;
      background-color: var(--color-beige);
      transition: all 0.3s ease;
      display: block;
   }

   .header-menu-drawer {
      position: fixed;
      top: 0;
      right: -500px;
      width: 500px;
      height: 100vh;
      background-color: var(--color-main);
      padding: 0;
      transition: right 0.4s ease;
      z-index: 1050;
      overflow-y: auto;
      display: flex;
      justify-content: center;
      align-items: center;
   }

   @media all and (max-width: 768px) {
      .header-menu-drawer {
         right: -100%;
         width: 100%;
      }
   }

   body.is-open .header-menu-drawer {
      right: 0;
   }

   header .global-nav ul {
      flex-direction: column;
      align-items: center;
      gap: 48px;
   }

   .global-nav ul li {
      width: 100%;
      text-align: center;
   }

   .global-nav ul li a {
      color: var(--color-white);
      font-size: 24px;
      line-height: 1.2;
   }

   body.is-open .hamburger-menu .bar:nth-child(1) {
      transform: translateY(13px) rotate(45deg);
   }

   body.is-open .hamburger-menu .bar:nth-child(2) {
      opacity: 0;
   }

   body.is-open .hamburger-menu .bar:nth-child(3) {
      transform: translateY(-13px) rotate(-45deg);
   }
}