@charset "utf-8";

/* clampについて
-------------------------
  基本的に500px-950pxで書いています。
  yoyaku 500-900
  global 500-1000
*/
:root {
  --outfit: 'Outfit', sans-serif;
  /* font-optical-sizing: auto; */
  --Jost: 'Jost', sans-serif;
  --zenkaku: 'Zen Kaku Gothic New', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Noto Sans JP CJK', 'メイリオ', Meiryo, YuGothic, 'Yu Gothic', 'ＭＳ ゴシック', sans-serif;
  --bgLightYellow: #F8F8F8;
  --orange: #F26C18;
  --brown: #66422B;
  --white: #fff;
  --textBlack: #000;
  --textBlack2: #333;
  --blackrgb10: rgba(0, 0, 0, 0.1);
  --gray: #FAFAFA;
  --formRed: #d8495a;
  --pcWrapL: 1300px;
  --pcWrapM: 1200px;
  --pcWrapS: 1050px;
  --easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
  --easeInOutExpo: cubic-bezier(0.87, 0, 0.13, 1);
}

html {
  font-size: 62.5%;
  scroll-behavior: auto;
  color: var(--textBlack);
  letter-spacing: 0.06em;
  scroll-behavior: smooth;
}

body {
  font-family: var(--zenkaku);
  font-size: 1.5rem;
  font-weight: 500;
  color: #333;
}

button {
  border: none;
  cursor: pointer;
}

iframe {
  vertical-align: bottom;
}

.bg-yl {
  background: url(../images/bgmin.jpg) repeat;
}

.dib {
  display: inline-block;
}

.tar {
  text-align: right;
}

/* modal用 */
/* html,
body {
  overscroll-behavior-y: none;
} */

/* 共通部品
------------------------------------------ */
.orange {
  color: var(--orange);
}

.card-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: bold;
  padding-bottom: 4px;
  border-bottom: 1px solid #CEC3BC;
  letter-spacing: .15em;
}

.card-title .jp {
  font-size: 1.8rem;
  color: var(--orange);
}

.card-title .en {
  color: #66422B;
  font-size: 1.4rem;
}

/* circle-button */
.circle-button {
  font-size: 1.6rem;
  padding: 12px 0;
  /* border-bottom: 1px solid var(--brown); */
  color: var(--brown);
  text-decoration: none;
  font-weight: bold;
  position: relative;
  display: inline-block;
  margin-right: 35px;
}

.circle-button::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--brown);
  position: absolute;
  left: 0;
  bottom: 0;
  transition: .3s transform;
  transform-origin: left;
}

.circle-button span {
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #F26C18;
  opacity: .2;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(60%, -43%);
}

.circle-button:hover::after {
  transform: scaleX(0);
  transform-origin: right;
}

/* common-title */
.common-title {
  color: var(--textBlack);
  text-align: center;
  line-height: 1.45;
}

.common-title .jp {
  font-size: 2.9rem;
  letter-spacing: .05em;
}

.common-title .en {
  font-size: 1.3rem;
  font-family: var(--Jost);
  color: var(--orange);
  font-weight: 500;
  letter-spacing: .15em;
}

.common-title.underline {
  text-align: left;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--blackrgb10);
}


/* 共通部品 end
------------------------------------------ */

/* global-menu
------------------------------------------ */
/* ハンバーガーメニュー */
.menu-button {
  padding: 0 17px;
  background-color: #3E3E3E;
  border-radius: 30px;
  position: fixed;
  right: 31px;
  top: 55px;
  width: 148px;
  height: 36px;
  z-index: 999;
}

.menu-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #3E3E3E;
  border-radius: 30px;
  z-index: 2;
}

/* 耳 */
.menu-button>img {
  position: absolute;
  width: 19px;
  left: 15px;
  top: 0;
  transform: translateY(-85%);
  transition: .3s transform ease;
}

.menu-button>img:nth-child(2) {
  left: 33px;
}

/* close */
.menu-button.active>img {
  transform: translateY(0);
}

/* 耳 end */

.menu-button-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 3;
  position: relative;
}

.menu-button .line-wrap {
  height: 10px;
  width: 50px;
  position: relative;
  margin-left: 12px;
}

.menu-button .line-wrap span {
  height: 1px;
  width: 100%;
  background-color: #fff;
  position: absolute;
  left: 0;
  transition: .3s ease;
  transition-property: transform, top;
}

.menu-button .line-wrap span:nth-of-type(1) {
  top: 0;
}

.menu-button .line-wrap span:nth-of-type(2) {
  top: 100%;
  margin-top: -1px;
}

/* close */
.menu-button.active .line-wrap span:nth-of-type(1) {
  top: 50%;
  transform-origin: center;
  transform: rotate(13deg);
}

.menu-button.active .line-wrap span:nth-of-type(2) {
  top: 50%;
  margin: 0;
  transform: rotate(-13deg);
}

/* close end */
/* ハンバーガーメニュー end */
/* popup start */
#body.menu-active,
#body.yoyaku-active {
  overflow: hidden;
}

.menu-popup {
  overscroll-behavior-y: contain;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: #FFF2E5;
  transition: .5s ease;
  transition-property: opacity, visibility;
  overflow-y: auto;
}

.menu-popup.active {
  visibility: visible;
  opacity: 1;
}

.menu-popup-inner {
  /* width:58%; */
  max-width: 1240px;
  /* width:1200px; */
  padding: 0 70px;
  margin: 110px auto 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.menu-popup-nav {
  /* width:400px; */
  width: 430px;
  margin-bottom: 30px;
  max-width: 100%;
}

.menu-popup-nav h2 {
  color: var(--orange);
  font-size: 1.5rem;
  font-weight: bold;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--blackrgb10);
  margin-top: 70px;
}

.menu-popup-nav h2:nth-of-type(1) {
  margin: 0;
}

.menu-popup-nav ul {
  margin-top: 15px;
}

.menu-popup-nav li {
  margin-bottom: 37px;
}

.menu-popup-nav li a {
  text-decoration: none;
  font-weight: bold;
  font-size: 2.3rem;
  font-size: clamp(1.75rem, 1.0625rem + 1.375vw, 2.3rem);
  display: flex;
  /* padding-left:0.8em; */
  color: var(--brown);
  align-items: center;
  gap: 19px;
  letter-spacing: 0;
}

.menu-popup-nav li a::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../images/orageAccent.svg);
  background-size: contain;
  flex-shrink: 0;
}

/* 店舗情報 */
.menu-popup-info {
  max-width: 350px;
  width: 100%;
}

.menu-popup-info-card {
  background-color: #fff;
  padding: 25px 30px 60px;
  border-radius: 18px;
  color: var(--brown);
  margin-bottom: 50px;
}

.menu-popup-info-card a {
  color: var(--brown);
  text-decoration: underline;
}

.menu-popup-info-card a:hover {
  text-decoration: none;
}

.menu-popup-info h2 {
  font-size: 1.5rem;
  font-weight: bold;
  padding-bottom: 2px;
  border-bottom: 1px solid #CEC3BC;
  margin-bottom: 27px;
  letter-spacing: .1em;
}

.menu-popup-info .address {
  letter-spacing: .06em;
  font-size: 1.4rem;
}

.menu-popup-info .address span {
  display: block;
  line-height: 1.45;
  letter-spacing: .1em;
}

.menu-popup-info .map {
  display: inline-flex;
  font-weight: bold;
  font-size: 1.4rem;
  letter-spacing: .15em;
  align-items: flex-end;
}

.menu-popup-info .map img {
  width: 20px;
}

.menu-popup-info .open {
  margin-top: .5em;
  font-size: 1.4rem;
}

.menu-popup-info .open>span {
  font-family: var(--Jost);
  font-size: 1.3rem;
}

.menu-popup-info .open>span .time {
  font-size: 1.5rem;
}

.menu-popup-info .tel {
  display: block;
  margin-top: .5em;
  letter-spacing: .1em;
  font-family: var(--Jost);
  font-weight: 500;
  font-size: 1.3rem;
}

.menu-popup-info .tel .num {
  font-size: 1.5rem
}


/* 店舗情報 end */
/* animation */
.menu-popup.active .menu-popup-nav,
.menu-popup.active .menu-popup-info {
  transform: translateY(0);
}

.menu-popup.active .menu-popup-info {
  transition-delay: .08s;
}

.menu-popup-nav,
.menu-popup-info {
  transition: .4s ease;
  transform: translateY(10px);
}

.menu-popup-info {
  transition-delay: .08s;
  /* transition-delay: 0s; */
}

/* animation end */

/* popup end */

/* global-menu end
----------------------------------------------- */

/* 接見予約について */
/* button */
.yoyaku-button {
  padding: 15px 18px;
  background-color: var(--brown);
  color: var(--white);
  display: flex;
  position: fixed;
  top: 108px;
  right: 31px;
  font-size: 1.4rem;
  border-radius: 30px;
  font-weight: 500;
  letter-spacing: .1em;
  gap: 4px;
  z-index: 99;
  cursor: pointer;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.yoyaku-button img {
  width: 13px;
  height: 13px;
}

/* close-button */
.yoyaku-close-button {
  background: transparent;
  border: 0;
  padding: 10px;
  position: absolute;
  top: 15px;
  right: 17px;
}

/* popup */
.yoyaku-popup {
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  /* top: 0;
  left: 0; */
  inset:0;
  z-index: 1000;
  transition: .4s ease opacity, .4s ease visibility;
}

.yoyaku-popup.is-active {
  opacity: 1;
  visibility: visible;
}

.yoyaku-popup .yoyaku-close-bg {
  background-color: #fff;
  opacity: .9;
  width: 100vw;
  height: 100vh;
  position: absolute;
  inset: 0;
}

.yoyaku-popup-inner {
  z-index: 1;
  position: absolute;
  background-color: #fff;
  max-width: 800px;
  /* max-height: 80vh; */
  width: 70%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 35px;
  border: clamp(15px, 3vw, 27px) solid #3E3E3E;
  overflow: hidden;
}

.yoyaku-popup-content {
  padding: 45px 40px 45px;
  overflow-y: auto;
  overscroll-behavior: none;
  background-color: #fff;
  max-height: 80vh;
  max-height: 80svh;
  width: 100%;
  /* max-width: 800px; */
}

/* popup 中身 */
.yoyaku-popup .title {
  font-size: 1.9rem;
  font-size: clamp(1.7rem, 1.45rem + 0.5vw, 1.9rem);
  color: var(--orange);
  margin-bottom: 25px;
  padding-bottom: .5em;
  border-bottom: 1px solid var(--blackrgb10);
}

.yoyaku-popup p {
  color: var(--brown);
  text-align: left;
  font-size: 1.4rem;
  font-size: clamp(1.3rem, .95rem + 0.5vw, 1.4rem);
  line-height: 2.1;
}

.yoyaku-popup-item {
  text-align: center;
}

.yoyaku-popup .yoyaku-popup-item + .yoyaku-popup-item{
  margin-top: 60px;
}

/* tel */
.yoyaku-popup .tel-wrap {
  /* width: 320px; */
  border: 1px solid #EBEBEB;
  margin: auto;
  padding: 15px 55px;
  text-align: center;
  display: inline-block;
}

.yoyaku-popup .tel-wrap .tel-link {
  font-family: var(--Jost);
  font-weight: 500;
  /* display: flex;
  margin: auto; */
  color: var(--brown);
  font-size: 1.5rem;
  letter-spacing: .15em;
  text-align: center;
}

.yoyaku-popup .tel-wrap .num {
  color: var(--brown);
  font-size: 2.1rem;
  font-size: clamp(1.8rem, 1.425rem + 0.75vw, 2.1rem);
  letter-spacing: .17em;
}

.yoyaku-popup .tel-wrap .open {
  text-align: center;
}

.yoyaku-popup .tel-wrap .open span {
  font-family: var(--Jost);
}

.yoyaku-popup .yoyaku-popup-contact-note {
  text-align: center;
  margin-top: .8em;
}

.yoyaku-popup-contact-note a,
.yoyaku-popup .yoyaku a {
  color: var(--brown);
}

/* footer
------------------------------------------- */
.index .footer {
  margin-top: 0;
}

.footer {
  background-color: var(--brown);
  width: 100%;
  color: #eeeeee;
  margin-top: 200px;
}

.footer-inner {
  margin: auto;
  width: 1200px;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 75px 50px 130px;
}

/* info */
.footer-logo {
  width: 165px;
  margin: auto;
  display: block;
  margin-bottom: 40px;
}

.footer-info {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.45;
  letter-spacing: .06em;
}


.footer-info .open {
  margin-top: .6em;
}

.footer-info .open>span {
  font-family: var(--Jost);
}

/* .footer-info .open .time {
  font-size: 1.4rem;
} */

.footer-info .tel {
  font-family: var(--Jost);
  letter-spacing: .15em;
  margin-top: .6em;
  font-size: 1.3rem;
}

.footer-info .tel a {
  color: #ececec;
  letter-spacing: .12em;
  font-size: 1.45rem;
  text-underline-offset: .2em;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

/* footer-nav */
.footer-nav {
  display: flex;
  gap: 100px;
}

.footer-nav-list {
  width: 270px;
}

.footer-nav h2 {
  letter-spacing: .08em;
  font-weight: 500;
  border-bottom: 1px solid #947B6B;
  padding-bottom: 6px;
  font-size: 1.3rem;
  line-height: 1.45;
}

.footer-nav li:first-child {
  margin-top: 10px;
}

.footer-nav li+li {
  margin-top: 17px;
}

.footer-nav a {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: .4em;
  line-height: 1.8;
  /* text-decoration: none; */
}

.footer-nav a::before {
  width: 10px;
  height: 10px;
  content: "";
  background: url(../images/brownAccent.svg);
  display: block;
  flex-shrink: 0;
}

.copy {
  text-align: center;
  display: block;
  font-size: 1.1rem;
  letter-spacing: .06em;
}

/* index.html
--------------------------------------------- */
/* hero
--------------------- */

/* logo&info */
.hero {
  position: relative;
  /* min-height: 100vh; */
}

.hero .logo-wrap {
  position: absolute;
  left: 10%;
  top: 20px;
  display: flex;
  align-items: center;
  gap: 50px;
}

.hero .logo {
  width: 170px;
}

.hero .info {
  display: inline-block;
  position: relative;
  top: -5px;
  padding: 8px 16px;
  background-color: #fff;
  border-radius: 7px;
  font-size: 1.2rem;
  color: var(--brown);
  font-weight: bold;
}

.hero .info .address {
  line-height: 1.4;
  display: inline-block;
}

.hero .info .open span {
  font-family: var(--Jost);
  font-size: 1.25rem;
  font-weight: 500;
}

/* hero */
.hero-inner {
  display: flex;
  justify-content: center;
  padding-top: 210px;
  gap: 150px;
  align-items: flex-start;
}

/* title */
.hero .left {
  width: 450px;
  position: relative;
  max-width: 100%;
}

.hero .title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  justify-content: center;
}

.hero .title img {
  width: 62px;
}

/* clover */
.hero-clover {
  position: absolute;
}

.hero-clover1 {
  width: 116px;
  left: 0;
  top: 0;
  transform: translateY(-25%);
}

.hero-clover2 {
  top: 50%;
  right: 0;
  transform: translateY(-60%);
}

.hero-clover3 {
  bottom: 0;
  left: 0;
  transform: translateX(20%);
}

.hero-heart {
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translate(-50%, 100%);
  width: 80%;
}

/* right text */
.hero .right {
  padding-right: 143px;
  padding-right: clamp(0px, -238.333px + 19.861vw, 143px);
  ;
}

.hero .right p {
  font-size: 1.9rem;
  line-height: 4.9;
  line-height: 4.2;
  letter-spacing: .1em;
  font-weight: bold;
  color: var(--brown);
}

/* お知らせ
---------------------- */
.top-news {
  max-width: 1200px;
  padding: 0 50px;
  margin: auto;
  margin-top: 120px;
}

.top-news-inner {
  background-color: #fff;
  padding: 41px 65px 70px;
  border-radius: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 130px;
}

.top-news-title {
  flex-shrink: 0;
  line-height: 1.7;
  font-weight: bold;
  padding-left: 45px;
  padding-right: 30px;
}

.top-news-title .jp {
  font-size: 2.5rem;
  color: var(--orange);
  letter-spacing: 0.15em;
}

.top-news-title .en {
  font-size: 1.5rem;
  /* font-family: var(--Jost); */
  color: var(--brown);
  letter-spacing: 0.15em;
}

.top-news-item+.top-news-item {
  margin-top: 60px;
}

.top-news-item h3 {
  font-size: 1.7rem;
  letter-spacing: 0.15em;
  line-height: 1.7;
  color: var(--orange);
  margin-bottom: 0.9em;
  text-wrap: unset;
}

.top-news-item p {
  line-height: 2.1;
  color: var(--brown);
}

.top-news-item p + p {
  margin-top: 1.1em;
}

/* top-concept
------------------------ */
.top-concept {
  position: relative;
  margin-top: 55px;
  display: flex;
  align-items: flex-end;
  overflow-x: hidden;
  justify-content: center;
  padding-bottom: 160px;
  gap: 50px;
}

.top-concept .left {
  position: relative;
  max-width: 500px;
  color: var(--brown);
  margin-left: 100px;
}

.top-concept-title-wrap {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}

.top-concept-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.top-concept-title .item {
  font-size: 3.1rem;
  letter-spacing: .07em;
  line-height: 1.45;
  padding: 2px 10px;
  background-color: #fff;

}

.top-concept-concept {
  font-size: 2.1rem;
  font-weight: bold;
  padding: 5px 8px;
  color: var(--orange);
  background-color: #fff;
  display: inline-block;
  margin-bottom: 40px;
  /* position: absolute;
  top: 0;
  left: 0; */
}

.top-concept-text {
  margin-top: 45px;
  line-height: 2.4;
}

.top-concept .circle-button {
  margin-top: 60px;
}

.top-concept .right {
  /* margin-left: 50px; */
  width: 867px;
  position: relative;
  /* left: 50px; */
  flex-shrink: 0;
}

.top-concept picture {
  flex-shrink: 0;
  margin-right: -50px;
}

/* top-cafe
-------------------------------- */
.top-cafe {
  background-color: #fff;
  padding: 75px 50px 130px;
}

.top-cafe-inner {
  margin: auto;
  max-width: 1400px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 38px;
  margin-top: 58px;
}

.top-cafe-item {
  width: 50%;
  padding: 37px 45px 50px;
  background-color: var(--gray);
  color: var(--textBlack2);
  border-radius: 12px;
}

.top-cafe-item .text {
  line-height: 2.1;
}

.top-cafe-item .card-title {
  margin-bottom: 25px;
}

.top-cafe-item li:first-child {
  margin-top: 40px;
}

.top-cafe-item li {
  display: flex;
  justify-content: space-between;
  padding-bottom: 5px;
  line-height: 1.45;
  border-bottom: 1px solid var(--blackrgb10);
  margin-top: 30px;
}

.top-cafe-item li .age {
  font-size: 1.6rem;
}

.top-cafe-item li .price {
  font-family: var(--Jost);
  font-size: 1.9rem;
}

.top-cafe-item .price-note {
  font-size: 1.1rem;
  color: var(--brown);
  text-align: right;
  margin-top: 5px;
}

.top-cafe-item .note {
  line-height: 2.1;
  font-size: 1.3rem;
}

.circle-button-wrap {
  margin-top: 70px;
  margin-top: clamp(45px, 17.222px + 5.556vw, 70px);
  text-align: center;
}

/* top-shop info
----------------------- */
.top-shop {
  overflow: hidden;
  padding: 80px 0 180px;
  margin: auto;
  /* margin: 80px auto 180px; */
}

.top-shop .common-title .jp {
  margin-bottom: 5px;
}

.top-shop-inner {
  margin: 90px auto 0;
  max-width: 1370px;
  padding: 0 50px;
}

.top-shop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* gap: 120px; */
  gap: 70px;
  color: var(--brown);
}

.top-shop-item+.top-shop-item {
  margin-top: 130px;
}

.top-shop-item:nth-of-type(even) {
  flex-direction: row-reverse;
}

/* text left */
.top-shop-item .text {
  width: 372px;
  flex-shrink: 0;
}

.top-shop-item-info-pc,
.top-shop-item-info-sp {
  margin-bottom: 42px;
  line-height: 1.45;
  display: flex;
  font-size: 1.7rem;
  gap: 15px;
  align-items: center;
  letter-spacing: .25em;
}

.top-shop-item-info-pc .l,
.top-shop-item-info-sp .l {
  font-weight: bold;
}

.top-shop-item-info-pc .c,
.top-shop-item-info-sp .c {
  width: 43px;
  height: 1px;
  opacity: .5;
  background-color: var(--brown);
}

.top-shop-item-info-pc .r,
.top-shop-item-info-sp .r {
  font-weight: 500;
  font-family: var(--Jost);
}

.top-shop-item-info-sp {
  display: none;
}

.top-shop-item-title {
  font-size: 2.6rem;
  line-height: 2;
  letter-spacing: .08em;
  margin-bottom: 1.2em;
}

.top-shop-item-text {
  line-height: 2.1;
}

.top-shop-item .circle-button {
  margin-top: 42px;
}

/* image */
.top-shop-item .img {
  width: 61.4%;
}

.top-shop-item .img {
  position: relative;
}

.top-shop-item .img .right {
  min-height: 450px;
  border-radius: 10px;
  object-fit: cover;
}

.top-shop-item-accent {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(-30%, 30%);
  /* filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.25)); */
  /* filter: drop-shadow(0 0 4px rgba(242, 108, 24, 0.25));  */
}

.top-shop-item:nth-of-type(even) .top-shop-item-accent {
  left: auto;
  right: 0;
  transform: translate(30%, 25%);
  /* transform: translate(10%, 20%); */
}

/* top-craft
---------------------- */
.top-craft {
  background-color: #fff;
  overflow: hidden;
}

.top-craft-inner {
  padding: 110px 50px 170px;
  display: flex;
  max-width: 1400px;
  align-items: flex-start;
  justify-content: center;
  gap: 120px;
  margin: auto;
}

.top-craft .left {
  width: 500px;
}

.top-craft-title {
  margin-bottom: 47px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
}

.top-craft-title .text {
  font-size: 2rem;
  padding: 6px 14px;
  line-height: 1.45;
  letter-spacing: .08em;
  color: var(--brown);
  background-color: #f2f2f2;
  display: inline-block;
}

.top-craft-title img {
  width: 55%;
  max-width: 298px;
}

.top-craft .left>p {
  line-height: 2.1;
  /* margin-bottom: 2.33em; */
  margin-bottom: 3em;
  color: var(--textBlack);
}

.top-craft .right {
  /* height: 540px; */
  width: 53.5%;
  position: relative;
  min-width: 0;
  flex-shrink: 0;
  height: 550px;
}

.top-craft .right .img {
  border-radius: 5px;
  /* width: 100%; */
  height: 100%;
  min-width: 0;
  object-fit: cover;
}

.top-craft .right .accent {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 180px;
  transform: translate(-43%, 45%);
}

/* top-access
------------------------- */
.top-access {
  margin-top: 60px;
  letter-spacing: 0;
  line-height: 1.6;
}

.top-access-inner {
  max-width: 1100px;
  /* padding: 0 50px; */
  padding-left: 100px;
  display: flex;
  gap: 80px;
  margin: 40px auto 110px;
}

/* left */
.top-access .left {
  width: 250px;
  flex-shrink: 0;
}

.top-access li {
  padding: 16px 0;
  border-bottom: 1px solid var(--blackrgb10);
}


.top-access li .title {
  color: var(--orange);
  font-size: 1.45rem;
}

.top-access li .address {
  line-height: 1.5;
}

.top-access li .name {
  color: var(--brown);
  font-size: 1.5rem;
}

.top-access li .num {
  font-family: var(--Jost);
}

.top-access li .tel {
  font-family: var(--Jost);
  letter-spacing: .06em;
}

/* right */
.top-access .right {
  min-width: 0;
  border-radius: 25px;
  object-fit: cover;
}


/* otherpage 下層ページ共通
-------------------------------------------- */
.otherpage-title {
  max-width: 1520px;
  margin: auto;
  position: relative;
  /* height: 500px; */
  padding: 0 50px;
  margin-bottom: 130px;
}

.otherpage-title img {
  border-radius: 0 0 43px 43px;
  object-fit: cover;
  height: 500px;
}

.otherpage-title h2 {
  position: absolute;
  left: 130px;
  bottom: 110px;
  color: #453C39;
  line-height: 1.45;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  align-items: flex-start;
}

.otherpage-title h2 .jp {
  font-size: 3.2rem;
  font-size: clamp(2.5rem, 2.1111rem + 0.778vw, 3.2rem);
  letter-spacing: .03em;
  padding: 5px 11px;
  background-color: #fff;
}

.otherpage-title h2 .en {
  letter-spacing: .05em;
  font-family: var(--Jost);
  background-color: #fff;
  padding: 2px 6px;
  font-size: 1.6rem;
  font-size: clamp(1.4rem, 1.2889rem + 0.222vw, 1.6rem);
  font-weight: 500;
}

/* about.html
--------------------------------- */
.about-wrap {
  max-width: 1250px;
  padding: 0 100px;
  padding: 0 clamp(25px, -58.333px + 16.667vw, 100px);
  margin: auto;
}

.about-wrap>section {
  margin-bottom: 120px;
}

/* about-about */
.about-about>h2 {
  margin-bottom: 55px;
}

.about-about-item {
  line-height: 1.6;
  padding: 29px 14px;
  border-top: 1px solid #EACFB7;
  display: flex;
  align-items: center;
}

.about-about-item:last-child {
  border-bottom: 1px solid #EACFB7;
}

.about-about-item .title {
  color: var(--orange);
  font-size: 1.6rem;
  width: 22%;
  min-width: 150px;
}

.about-about-item .name {
  color: var(--brown);
  font-size: 1.7rem;
  font-family: 'jost', var(--zenkaku);
}

.about-about-item .address span {
  display: block;
  font-size: 1.4rem;
  line-height: 1.2;
}

.about-about-item .num {
  font-family: var(--Jost);
}

/* about-contact */
.about-contact {
  border-bottom: 1px solid var(--blackrgb10);
  padding-bottom: 40px;
}

.about-contact .text {
  margin: 35px 0 45px;
  line-height: 2.1;
}

.about-contact-tel-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 45px 75px;
  color: var(--brown);
}

.about-contact-tel-item h3 {
  font-size: 1.7rem;
  color: var(--orange);
  letter-spacing: 0;
  margin-bottom: 0.35em;
}

.about-contact-tel-item h3 span {
  display: inline-block;
}

.about-contact-tel-item a {
  font-family: var(--Jost);
  font-size: 2.5rem;
  font-size: clamp(2.2rem, 1.8667rem + 0.667vw, 2.5rem);
  letter-spacing: .09em;
  /* margin-top: 0.25em; */
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.about-contact-tel-item a span {
  font-size: 2.3rem;
  font-size: clamp(2rem, 1.6667rem + 0.667vw, 2.3rem);
}

.about-contact-tel-item .time {
  font-size: 1.45rem;
  letter-spacing: 0;
}

.about-contact-tel-item .time span {
  font-family: var(--Jost);
}

/* about-access */
.about-access>h2 {
  margin-bottom: 40px;
}

.about-access iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 25px;
}

.about-access-info {
  max-width: 650px;
  margin-top: 20px;
}

.about-access-info-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #EACFB7;
  margin-bottom: 1em;
  margin-bottom: 4px;
  gap: 50px;
}

.about-access-info-item .title {
  width: 80px;
  flex-shrink: 0;
  color: var(--orange);
}

/* concept.html
-------------------------- */
.concept-wrap {
  max-width: 1170px;
  margin: auto;
  padding: 0 100px;
  padding: 0 clamp(25px, -58.333px + 16.667vw, 100px);
}

.concept-wrap>section {
  margin-bottom: 100px;
}

.concept-title {
  color: var(--brown);
  letter-spacing: .02em;
  border-bottom: 1px solid var(--blackrgb10);
  padding-bottom: 0.6em;
  gap: 13px;
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  font-size: 2.2rem;
}

.concept-title img {
  width: 13px;
  height: 13px;
  position: relative;
  top: 1px;
}

.concept-wrap p {
  font-size: 1.4rem;
  line-height: 2.3;
}

.concept-text-bottom {
  margin-top:1em;
}

/* cafespace.html
------------------------------- */
.cafe-concept {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  max-width: 1440px;
  padding: 0 20px;
  gap: 110px;
  gap: clamp(70px, -170.000px + 20vw, 110px);
  ;
  margin: auto;
  /* align-items: flex-start; */
}

/* img */
.cafe-concept .img {
  width: 47%;
  flex-shrink: 0;
  /* min-width: 650px; */
}

.cafe-concept .img picture {
  height: 100%;
  max-height: 700px;
}

.cafe-concept .img img {
  border-radius: 25px;
  object-fit: cover;
  height: 100%;
  /* max-height: 700px; */
}

/* text */
.cafe-concept .text {
  padding-top: 64px;
  position: relative;
}

.cafe-concept .text h2 {
  font-size: 2.7rem;
  margin-bottom: .93em;
}

.cafe-concept .accent {
  position: absolute;
  left: 2px;
  top: 32px;
}

.cafe-concept .text p {
  line-height: 2.3;
}

/* price */
.cafe-price {
  margin-top: 105px;
}

.cafe-price .inner {
  max-width: 900px;
  border-radius: 13px;
  background-color: #fff;
  padding: 50px 80px;
  margin: auto;
}

.cafe-price .card-title .jp {
  font-size: 2.4rem;
}

/* price */
.cafe-price-list li {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.cafe-price-list li::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  opacity: 0.1;
  background-color: var(--brown);
  top: 50%;
  left: 0;
}

.cafe-price-list .age {
  background-color: #fff;
  padding-right: 25px;
  position: relative;
  z-index: 2;
  font-size: 1.7rem;
}

.cafe-price-list .price {
  background-color: #fff;
  padding-left: 25px;
  position: relative;
  z-index: 2;
  font-size: 1.9rem;
  font-family: var(--Jost);
}


/* price end */
.cafe-price .price-note {
  font-size: 1.1rem;
  color: var(--brown);
  text-align: right;
  margin-top: 15px;
  line-height: 1;
}

.cafe-price .note {
  font-size: 1.3rem;
  line-height: 2.1;
  margin-top: 2em;
}

/* cafe-image */
.cafe-image {
  margin-top: 130px;
}

.cafe-image .inner {
  margin: auto;
  max-width: 1300px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 25px;
}

.cafe-image picture {
  width: 32%;
}

.cafe-image img {
  /* width: 32%; */
  border-radius: 10px;
}

/* cafe-access */
.cafe-access {
  margin-top: 90px;
  background-color: #fff;
  padding-top: 65px;
}

.cafe-access .common-title {
  margin-bottom: 40px;
}

.cafe-access-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1350px;
  padding: 0 25px;
  margin: auto;
  gap: 65px;
}

/* left */
.cafe-access .left {
  width: 430px;
  /* flex-shrink: 0; */
  justify-content: center;
}

.cafe-access .left li {
  display: flex;
  padding: 23px 0;
  border-bottom: 1px solid #EACFB7;
}

.cafe-access .left .title {
  color: var(--orange);
  font-size: 1.6rem;
  width: 130px;
  width: clamp(105px, -95.000px + 16.667vw, 130px);
  /* flex-shrink: 0; */
}

.cafe-access .left .name {
  color: var(--brown);
  font-size: 1.7rem;
}

/* 個別設定 */
.cafe-access .left .num {
  font-family: var(--Jost);
}

.cafe-access .left .address {
  letter-spacing: 0;
}

.cafe-access .left .address div {
  font-size: 1.4rem;
  line-height: 1;
}

/* googlemap */
.cafe-access iframe {
  width: 64.5%;
  max-width: 820px;
  height: auto;
  aspect-ratio: 3/2;
  border-radius: 25px;
}

/* catshelter.html
-------------------------------- */
.cat-concept {
  padding-bottom: 110px;
  overflow: hidden;
  margin-bottom: 30px;
}

.cat-concept-inner {
  display: flex;
  flex-direction: row-reverse;
  max-width: 1450px;
  margin: auto;
  align-items: center;
  justify-content: center;
  gap: 105px;
  gap: clamp(75px, -69.000px + 12vw, 105px);
  position: relative;
  right: 100px;
  right: clamp(0px, -375.000px + 25vw, 100px);
}

/* text */
.cat-concept .text {
  position: relative;
  transform: translateY(10%);
  max-width: 550px;
  padding-right: 100px;
}

.cat-concept-en {
  font-family: var(--Jost);
  font-size: 2.35rem;
  letter-spacing: .1em;
  padding: 2px 7.5px;
  background-color: #fff;
  font-weight: 600;
  line-height: 1.45;
  color: var(--orange);
  position: relative;
  z-index: 1;
  display: inline-block;
}

/* title */
.cat-concept-title {
  font-size: 2.8rem;
  line-height: 2.1;
  margin-top: 41px;
  position: relative;
  z-index: 1;
  color: #000;
  letter-spacing: .04em;
}

.cat-concept-title-inner {
  position: relative;
  z-index: 2;
}

.cat-concept-title-accest {
  position: absolute;
  width: 100px;
  top: 50%;
  left: 0;
  transform: translate(-20%, -50%);
}

/* p */
.cat-concept-text {
  margin-top: 50px;
  line-height: 2.3;
  /* max-width: 450px; */
  padding-right: 1em;
  position: relative;
  z-index: 1;
}

/* 猫イラスト */
.cat-concept-illust-pc {
  z-index: 1;
  position: absolute;
  width: 165px;
  top: 0;
  right: 0;
  transform: translate(-8%, -50%);
}

/* shape */
.cat-concept .shape {
  position: absolute;
  top: 50%;
  right: 0;
  /* transform: translate(-50%,-50%); */
  /* transform: translate(-61%, -47%) scale(1.57); */
  transform: translateY(-52%) scale(1.4);
  transform-origin: right;
  /* transform-origin: center; */
  /* scale: 2; */
}

/* img */
.cat-concept-inner .img {
  width: 57%;
  z-index: 1;
  flex-shrink: 0;
}

.cat-concept-illust-sp {
  display: none;
}

/* cat-about
---------------- */
.cat-about-inner {
  max-width: 1470px;
  padding: 90px 25px 130px;
  margin: auto;
}

.cat-about .common-title {
  text-align: center;
  margin-bottom: 70px;
}

.cat-about-item {
  display: flex;
  align-items: center;
  gap: 110px;
  gap: clamp(70px, -250.000px + 26.667vw, 110px);
}

.cat-about-item:nth-of-type(1) {
  flex-direction: row-reverse;
  margin-bottom: 100px;
}

/* text */
.cat-about-item .text {
  position: relative;
  z-index: 1;
}

.cat-about-item h3 {
  font-size: 2.6rem;
  padding-top: 32px;
  font-weight: 500;
  margin-bottom: 1.3em;
  line-height: 2;
}

.cat-about-item .title-en {
  position: absolute;
  height: 16px;
  top: 0;
  left: 0;
}

.cat-about-item .text {
  line-height: 2.3;
}

/* img */
.cat-about-item .img {
  width: 50%;
  flex-shrink: 0;
}

/* cat-terms */
.cat-hogo,
.cat-sotugyo,
.cat-terms {
  max-width: 1300px;
  padding: 0 50px;
  margin: auto;
}

.cat-terms {
  margin-top: 130px;
}

.cat-terms .common-title {
  margin-bottom: 50px;
}

.cat-terms-content {
  display: flex;
  gap: 90px;
  gap: clamp(50px, -216.667px + 26.667vw, 90px);
  justify-content: center;
  align-items: flex-start;
}

.cat-terms-content .text {
  line-height: 2.3;
}

.yoyaku-popup-item .strong,
.cat-terms-content .text .strong {
  /* color: var(--orange); */
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: bold;
}

.yoyaku-popup-item .list,
.cat-terms-content .text .list {
  display: block;
  margin-top: 1em;
}

.cat-terms-content .img {
  flex-shrink: 0;
  width: 40%;
}

.cat-terms-content .img img {
  border-radius: 5px;
}

/* cat-hogo */
.cat-hogo {
  margin-top: 130px;
  margin-top: clamp(90px, 45.556px + 8.889vw, 130px);
}

.cat-hogo .common-title {
  margin-bottom: 15px;
}

.cat-hogo-list {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 35px;
}

.cat-hogo-item {
  background-color: var(--gray);
  padding: 35px;
  border-radius: 13px;
  font-size: 1.4rem;
  border: 1px solid var(--blackrgb10);
}

.cat-hogo-item-img {
  width: 100%;
  border-radius: 5px;
}

.cat-hogo-item h3 {
  color: var(--brown);
  font-size: 2.2rem;
  font-size: clamp(2rem, 1.7778rem + 0.444vw, 2.2rem);
  line-height: 1.45;
  padding-bottom: 0.59em;
  border-bottom: 1px solid var(--blackrgb10);
  margin-bottom: 18px;
  margin-top: 1.2em;
}

/* grid */
.cat-hogo-item ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* grid-template-rows: 1fr 1fr 1fr; */
  grid-template-rows: 1fr 1fr;
  column-gap: 40px;
  grid-auto-flow: column;
}

.cat-hogo-item li {
  display: flex;
  /* width: 48%; */
  align-items: center;
  padding: 12px 0;
  line-height: 1.45;
  border-bottom: 1px solid var(--blackrgb10);
}

.cat-hogo-item li .title {
  color: var(--orange);
  width: 50%;
  font-weight: bold;
  letter-spacing: .1em;
  /* font-size: 1.45rem; */
}

.cat-hogo-item li.sei .name {
  display: flex;
  align-items: center;
  gap: 3px;
}

.cat-hogo-item li.sei img {
  position: relative;
  top: 1px;
}

/* 性格、特徴 */
.cat-hogo-item .bottom-title {
  color: var(--orange);
  font-weight: bold;
  font-size: 1.45rem;
  margin-top: 25px;
  margin-bottom: .5em;
}

/* cat-sotugyo */
.cat-sotugyo {
  margin-top: 100px;
}

.cat-sotugyo .common-title {
  margin-bottom: 45px;
}

.cat-sotugyo-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  column-gap: 25px;
  row-gap: 40px;
}

.cat-sotuhyo-item {
  font-size: 1.4rem;
}

.cat-sotuhyo-item h3 {
  margin-top: 1em;
  font-size: 2.2rem;
  color: var(--brown);
  margin-bottom: 3px;
}

.cat-sotuhyo-item>img {
  border-radius: 5px;
}

.cat-sotuhyo-item li {
  max-width: 230px;
  display: flex;
  border-bottom: 1px solid var(--blackrgb10);
  padding: 9px 0;
}

.cat-sotuhyo-item li .title {
  color: var(--orange);
  font-weight: bold;
  width: 50%;
}

.cat-sotuhyo-item li.sei .name {
  display: flex;
}

.cat-sotuhyo-item .bottom-title {
  color: var(--orange);
  font-weight: bold;
  margin-top: .8em;
  margin-bottom: 4px;
}

.cat-sotuhyo-item .bottom-text {
  color: #747474;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--blackrgb10);
}

.cat-sotuhyo-item>img {
    object-fit: cover;
    aspect-ratio: 3/2;
  }

/* service.html
------------------------- */
.b-service {
  overflow: hidden;
  padding-top: 70px;
  padding-bottom: 160px;
}

.b-service-inner {
  max-width: 1350px;
  padding: 0 50px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: row-reverse;
  /* gap: 100px; */
  margin: auto;
  position: relative;
  left: -50px;
}

.b-service-text {
  padding-top: 70px;
}

.b-service-text .accent-sp {
  display: none;
}

/* title */
.b-service-title-wrap {
  padding-top: 30px;
  position: relative;
}

.b-service-text h2 {
  margin-bottom: 1.28em;
  letter-spacing: 0.04em;
  font-size: 2.8rem;
  color: var(--brown);
}

.b-service-title-wrap>span {
  color: var(--orange);
  font-family: var(--Jost);
  font-weight: 600;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  position: absolute;
  line-height: 1.45;
  top: 0;
  left: 0;
}

.b-service-title-wrap span img {
  width: 13px;
}

/* text */
.b-service-text>p {
  line-height: 3.2;
  letter-spacing: .08em;
  font-size: 1.6rem
}

/* img */
.b-service-img {
  width: 50%;
  flex-shrink: 0;
  position: relative;
  right: 105px;
}

.b-service-img .accent {
  position: absolute;
  top: 0;
  right: 0;
  width: 130px;
  transform: translate(28%, -40%);
}

/* b-work */
.b-work {
  max-width: 1180px;
  padding: 0 50px;
  margin: auto;
  justify-content: flex-start;
  align-items: flex-start
}

.b-work .common-title {
  margin-bottom: 50px;
}

.b-work .common-title .jp,
.b-pamf-title {
  font-size: 2.6rem;
  font-size: clamp(2.4rem, 2.1778rem + 0.444vw, 2.6rem);
}

.b-work-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 40px;
}

.b-work-item {
  width: 100%;
}

.b-work-item img {
  border-radius: 15px;
}

.b-work-item h3 {
  font-size: 2rem;
  margin-top: 1em;
  margin-bottom: 0.7em;
  color: var(--brown);
  letter-spacing: 0;
}

.b-work-item p {
  line-height: 2.1;
}

/* b-pamf */
.b-pamf {
  position: relative;
  background-color: #fff;
  margin-top: 260px;
}

.b-pamf-title-wrap {
  text-align: center;
}

.b-pamf-title {
  color: var(--brown);
}

.b-pamf-title-wrap .sub {
  color: var(--orange);
  font-size: 1.3rem;
}

.b-pamf-content {
  display: flex;
  gap: 10px;
  margin: 30px auto 0;
  max-width: 1500px;
  padding: 0 50px;
}

.b-pamf-content a {
  position: relative;
}

.b-pamf-content picture img {
  border-radius: 5px;
}

.b-pamf-content .zoom-icon {
  background-color: #fff;
  padding: 3px;
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 5px 0 5px 0;
}

.b-pamf-content .zoom-icon img {
  width: 14px;
}



/* overlay */
.b-overlay {
  position: absolute;
  top: 1px;
  left: 0;
  width: 100%;
  transform: translateY(-100%);
  transform-origin: bottom;
}

/* flow */
.b-flow {
  background-color: #fff;
  padding-top: 120px;
}

.b-flow-inner {
  max-width: 1120px;
  padding: 0 50px;
  padding: 0 clamp(25px, -58.333px + 16.667vw, 100px);
  margin: auto;
}

.b-flow .common-title {
  margin-bottom: 60px;
}

.b-flow-list {
  position: relative;
}

.b-flow-list::after {
  content: "";
  width: 1px;
  height: 100%;
  background-color: var(--blackrgb10);
  position: absolute;
  top: 0;
  left: 10%;
}

.b-flow-item {
  padding: 23px 41px 28px;
  color: var(--brown);
  background-color: var(--gray);
  background-color: #F8F8F8;
  border-radius: 24px;
  position: relative;
  line-height: 2.1;
  z-index: 1;
}

.b-flow-item+.b-flow-item {
  margin-top: 45px;
}

/* 中身 */
.b-flow-item h3 {
  line-height: 1.8;
  font-size: 2rem;
  color: var(--orange);
  margin-bottom: 0.85em;
}

.b-flow-item>.num {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  width: 46px;
  width: clamp(36px, 24.889px + 2.222vw, 46px);
  height: 46px;
  height: clamp(36px, 24.889px + 2.222vw, 46px);
  border: #e9e9e9 1px solid;
  transform: translate(-30%, -20%);
  font-size: 1.8rem;
  font-size: clamp(1.5rem, 1.1667rem + 0.667vw, 1.8rem);
  font-weight: 500;
  line-height: 1;
  font-family: var(--Jost);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

/* 電話 */
.b-flow-item .contact {
  margin-top: 1.1em;
  line-height: 1.8;
}

.b-flow-item .contact .tel {
  font-family: var(--Jost);
  font-size: 1.3rem;
  line-height: 1;
  margin-top: 6px;
  display: inline-block;
  color: var(--brown);
}

.b-flow-item .contact .tel .num {
  font-size: 2rem;
}

.b-flow-item .contact .note {
  font-size: 1.2rem;
  line-height: 1.7;
  display: inline-block;
}

/* b-qa */
.b-qa {
  padding-top: 110px;
  background-color: #fff;
}

.b-qa-inner {
  max-width: 1120px;
  padding: 0 50px;
  padding: 0 clamp(25px, -58.333px + 16.667vw, 100px);
  margin: auto;
}

.b-qa .common-title {
  margin-bottom: 65px;
}

.b-qa .common-title .jp {
  font-size: 2.7rem;
  font-size: clamp(2.4rem, 2.0667rem + 0.667vw, 2.7rem);
}

/* アコーディオン */
summary {
  display: block;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

.b-qa-item {
  color: var(--brown);
  border-top: 1px solid var(--blackrgb10);
}

.b-qa-item:last-child {
  border-bottom: 1px solid var(--blackrgb10);
}

.b-qa .question-inner {
  font-size: 1.8rem;
  font-size: clamp(1.6rem, 1.3778rem + 0.444vw, 1.8rem);
  color: var(--orange);
  padding: 24px 54px;
  padding-right: 0;
  line-height: 1.6;
  display: block;
  position: relative;
}

.b-qa .icon {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.b-qa .icon-2 {
  transition: .3s ease-in-out;
  transform: translateY(-50%) rotate(90deg);
}

.b-qa .is-open .icon-2 {
  opacity: .5;
  transform: translateY(-50%) rotate(0deg);
}

.b-qa .answer {
  overflow: hidden;
}

.b-qa .answer-inner {
  padding: 14px 0 41px 54px;
}

/* craft.html
----------------------------- */
.craft-about {
  margin: auto;
  padding: 0 100px;
  padding: 0 clamp(25px, -58.333px + 16.667vw, 100px);
  max-width: 1150px;
}

.craft-about-title {
  text-align: center;
}

.craft-about-title .jp {
  font-size: 2.45rem;
  font-size: clamp(1.8rem, 1.0778rem + 1.444vw, 2.45rem);
  display: inline-block;
  padding: 4px 15px;
  letter-spacing: .08em;
  line-height: 1.45;
  color: var(--brown);
  background-color: #fff;
  border-radius: 6px;
  margin-bottom: 1.64em;
}

.craft-about-title .en {
  margin: auto;
  margin-bottom: 50px;
  margin-bottom: clamp(35px, 9.286px + 4.286vw, 50px);
  width: 800px;
}

.craft-about p {
  color: #000;
  line-height: 2.1;
  max-width: 660px;
  margin: auto;
  margin-bottom: 50px;
}

.craft-about-img {
  border-radius: 6px;
}

/* .craft-about-img-wrap {
  position: relative;
}

.craft-about-img-accent {
  position: absolute;
  bottom:0;
  right:0;
  transform: translate(30%,40%);
  width: 180px;
} */

/* craft-works */
.craft-works {
  margin: 150px auto 0;
  max-width: 1160px;
  padding: 0 50px;
  padding: 0 clamp(25px, -2.778px + 5.556vw, 50px);
}

.craft-works .common-title {
  text-align: center;
  padding-bottom: 15px;
  margin-bottom: 25px;
}

.craft-works p {
  color: var(--brown);
  line-height: 2.1;
}

.craft-works-inner {
  color: var(--brown);
}

/* craft-works */
.craft-works-inner {
  margin-top: 22px;
}

.craft-works-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
}

.craft-works-list a {
  position: relative;
  /* border-radius: 5px; */
}

.craft-works-list .zoom-icon {
  background-color: #fff;
  padding: 4px;
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 5px 0 5px 0;
}

.craft-works-inner>.note {
  font-size: 1.2rem;
  text-align: right;
  line-height: 1.8;
}

.craft-works img {
  border-radius: 5px;
}

/* 404.html
--------------------------- */
.otherpage-title.otherpage-title-404 {
  max-width: 1200px;
  margin-bottom: 100px;
}

.otherpage-title.otherpage-title-404,.otherpage-title.otherpage-title-404 img {
  height: 300px;
  width: 100%;
}

.not-found {
  text-align: center;
}

.not-found > img {
  margin: auto;
  padding: 0 5%;
}

.not-found p {
  margin-top: 3em;
  margin-bottom: 3em;
  line-height: 2.1;
}

@media (min-width:2000px) {

  body {
    /* font-size: clamp(15px, 9.643px + 0.268vw, 16.5px); */
    font-size: clamp(15px, 0.714px + 0.714vw, 19px);
    /* font-size: clamp(15px, -1.071px + 0.804vw, 19.5px); */
  }

  /* global-menu
  ---------------------------- */
  /* ハンバーガー */
  .menu-button {
    width: clamp(148px, 1.333px + 7.333vw, 192px);
    height: clamp(36px, 6px + 1.5vw, 45px);
    padding: 0 clamp(17px, 0.333px + 0.833vw, 22px);
  }

  #menu-text {
    height: clamp(12px, 1px + 0.55vw, 15.3px);
  }

  .menu-button .line-wrap {
    height: clamp(10px, 3.333px + 0.333vw, 12px);
    width: clamp(50px, 3.333px + 2.333vw, 64px);
  }

  /* popup */
  .menu-popup-inner {
    max-width: clamp(1240px, 311.429px + 46.429vw, 1500px);
  }

  .menu-popup-nav {
    width: clamp(430px, -177.143px + 30.357vw, 600px);
  }

  .menu-popup-nav h2 {
    font-size: clamp(15px, -2.857px + 0.893vw, 20px);
  }

  .menu-popup-nav ul {
    margin-bottom: clamp(15px, 0.714px + 0.714vw, 19px);
  }

  .menu-popup-nav li {
    margin-bottom: 0;
  }

  .menu-popup-nav li a {
    margin-bottom: 1.6em;
    font-size: clamp(23px, -3.786px + 1.339vw, 3.05em);
  }

  .menu-popup-info h2,
  .menu-popup-info .address,
  .menu-popup-info .open,
  .menu-popup-info .map,
  .menu-popup-info .open>span,
  .menu-popup-info .open>span .time,
  .menu-popup-info .tel,
  .menu-popup-info .tel .num {
    font-size: clamp(14px, -2.071px + 0.804vw, 18.5px);
  }

  .menu-popup-info {
    max-width: 400px;
  }


  /* 予約ボタン */
  .yoyaku-button {
    font-size: clamp(14px, 2.333px + 0.583vw, 17.5px);
    padding: clamp(15px, 8.333px + 0.333vw, 17px) clamp(18px, 1.333px + 0.833vw, 23px);
    border-radius: 50px;
    top: clamp(108px, 84.667px + 1.167vw, 115px);
    gap: 6px;
  }

  .yoyaku-button img {
    width: 15px;
    height: 15px;
  }

  /* 予約popup */

  .yoyaku-popup-inner {
    max-width: clamp(800px, 264.286px + 26.786vw, 950px);
    max-width: clamp(800px, -271.429px + 53.571vw, 1100px);
  }

  .yoyaku-close-button img {
    width: clamp(55px, 1.429px + 2.679vw, 70px);
  }

  .yoyaku-popup .title {
    font-size: clamp(19px, -2.429px + 1.071vw, 25px);
  }

  .yoyaku-popup p {
    font-size: clamp(14px, 3.286px + 0.536vw, 17px);
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
  }

  .yoyaku-popup .tel-wrap {
    padding: clamp(15px, -2.857px + 0.893vw, 20px) clamp(55px, 1.429px + 2.679vw, 70px);
  }

  .yoyaku-popup .tel-wrap .tel-link {
    font-size: clamp(15px, -2.857px + 0.893vw, 20px);
  }

  .yoyaku-popup .tel-wrap .num {
    font-size: clamp(21px, -2.214px + 1.161vw, 27.5px);
  }


  /* footer
  ---------------------------- */

  .footer-inner {
    width: clamp(1200px, 533.333px + 33.333vw, 1400px);
    max-width: 1400px;
  }

  .footer-info {
    font-size: clamp(14px, 4px + 0.5vw, 17px);
  }

  .footer-logo {
    width: clamp(165px, -25px + 9.5vw, 222px);
    ;
  }

  .footer-info .tel {
    font-size: clamp(14px, 4px + 0.5vw, 17px);
  }

  .footer-info .tel a {
    font-size: clamp(14.5px, 2.833px + 0.583vw, 18px);
  }

  .footer-nav-list {
    width: clamp(270px, 20.000px + 12.5vw, 340px);
  }

  .footer-nav h2 {
    font-size: clamp(13px, -0.333px + 0.667vw, 17px);
  }

  .footer-nav a {
    font-size: clamp(14px, -1px + 0.75vw, 18.5px);
  }

  .copy {
    font-size: clamp(11px, -0.667px + 0.583vw, 14.5px);
  }

  /* 共通
  ----------------------------- */
  .circle-button {
    font-size: clamp(16px, -1.857px + 0.893vw, 21px);
  }

  .circle-button span {
    width: clamp(92px, -15.143px + 5.357vw, 122px);
    height: clamp(92px, -15.143px + 5.357vw, 122px);
  }

  .circle-button span img {
    width: clamp(23px, 8.714px + 0.714vw, 27px);
  }

  .common-title .jp {
    font-size: clamp(29px, -3.143px + 1.607vw, 38px);
  }

  .common-title .en {
    font-size: clamp(13px, -1.286px + 0.714vw, 17px);
  }

  /* index.html
  ------------------------------------- */
  .hero .logo {
    width: clamp(170px, 27.143px + 7.143vw, 210px);
  }

  .hero .info,
  .hero .info .open span {
    font-size: clamp(12px, 4.857px + 0.357vw, 14px);
  }

  .hero .left {
    width: clamp(450px, 92.857px + 17.857vw, 550px);
  }

  .hero-clover1 {
    width: clamp(116px, 8.857px + 5.357vw, 146px);
  }

  .hero-clover2 {
    width: clamp(98px, 8.714px + 4.464vw, 123px);
  }

  .hero-clover3 {
    width: clamp(76px, 4.571px + 3.571vw, 96px);
  }

  .hero .title {
    gap: 12px;
  }

  .hero .title img {
    width: clamp(62px, 12.000px + 2.5vw, 76px);
  }

  .hero .right {
    padding: 0;
  }

  .hero .right p {
    font-size: clamp(19px, 1.143px + 0.893vw, 24px);
  }

  /* news */
  .top-news-item h3 {
    font-size: clamp(17px, -0.857px + 0.893vw, 22px);
  }

  .top-news-title .jp {
    font-size: clamp(25px, -3.571px + 1.429vw, 33px);
  }

  .top-news-title .en {
    font-size: clamp(15px, -2.857px + 0.893vw, 20px);
  }

  .top-news {
    max-width: clamp(1200px, 271.429px + 46.429vw, 1460px);
  }

  .top-news-inner {
    padding: clamp(41px, -26.857px + 3.393vw, 60px) clamp(65px, -6.429px + 3.571vw, 85px) 70px;
    gap: clamp(130px, 58.571px + 3.571vw, 150px);
  }

  /* top-concept */
  .top-concept {
    margin-top: clamp(55px, -9.286px + 3.214vw, 73px);
  }

  .top-concept .left {
    max-width: clamp(500px, 142.857px + 17.857vw, 600px);
  }

  .top-concept-concept {
    font-size: clamp(21px, -0.429px + 1.071vw, 27px);
  }

  .top-concept-title {
    gap: clamp(20px, -1.429px + 1.071vw, 26px);
  }

  .top-concept-title .item {
    font-size: clamp(31px, -4.714px + 1.786vw, 41px);
    padding: 3px 13px;
  }

  .top-concept-text {
    margin-top: clamp(45px, -12.143px + 2.857vw, 61px);
  }

  .top-concept .right {
    width: clamp(867px, -158.000px + 51.25vw, 1154px);
  }

  /* top-cafe */
  .top-cafe {
    padding-top: clamp(75px, 3.571px + 3.571vw, 95px);
    padding-bottom: clamp(130px, 58.571px + 3.571vw, 150px);
  }

  .top-cafe-inner {
    max-width: clamp(1400px, 221.429px + 58.929vw, 1730px);
  }

  .card-title .jp {
    font-size: clamp(18px, -3.429px + 1.071vw, 24px);
  }

  .card-title .en {
    font-size: clamp(14px, -0.286px + 0.714vw, 18px);
  }

  .top-cafe-item li {
    margin-top: clamp(30px, -5.714px + 1.786vw, 40px);
  }

  .top-cafe-item li .age {
    font-size: clamp(16px, -1.857px + 0.893vw, 21px);
  }

  .top-cafe-item li .price {
    font-size: clamp(19px, -2.429px + 1.071vw, 25px);
  }

  .top-cafe-item .note {
    font-size: clamp(13px, -1.286px + 0.714vw, 17px);
  }

  .top-cafe-item .price-note {
    font-size: clamp(11px, -1.500px + 0.625vw, 14.5px);
  }

  /* top-shop */
  .top-shop-inner {
    max-width: clamp(1370px, -201.429px + 78.571vw, 1810px);
  }

  .top-shop-item .text {
    width: clamp(372px, -85.143px + 22.857vw, 500px);
  }

  .top-shop-item-title {
    font-size: clamp(26px, -4.357px + 1.518vw, 34.5px);
  }

  .top-shop-item-info-pc {
    font-size: clamp(17px, -0.857px + 0.893vw, 22px);
    gap: clamp(15px, -2.857px + 0.893vw, 20px);
  }

  .top-shop-item-info-pc .c {
    width: 50px;
  }

  .top-shop-item .circle-button {
    margin-top: clamp(42px, -29.429px + 3.571vw, 62px);
  }

  .top-shop-item-accent {
    width: clamp(175px, 50.000px + 6.25vw, 210px);
  }

  /* top-craft */
  .top-craft-inner {
    padding-top: clamp(110px, -15.000px + 6.25vw, 145px);
    padding-bottom: clamp(170px, 62.857px + 5.357vw, 200px);
    max-width: clamp(1400px, -28.571px + 71.429vw, 1800px);
  }

  .top-craft .right,
  .top-craft .right .img {
    height: auto;
  }

  .top-craft .left {
    width: clamp(500px, -85.714px + 29.286vw, 664px);
  }

  .top-craft-title {
    margin-bottom: (47px, -6.571px + 2.679vw, 62px);
  }

  .top-craft-title .text {
    font-size: clamp(20px, -1.429px + 1.071vw, 26px);
  }

  .top-craft-title img {
    max-width: none;
  }

  /* top-access */
  .top-access {
    margin-top: clamp(60px, -29.286px + 4.464vw, 85px);
  }

  .top-access-inner {
    max-width: clamp(1100px, -150.000px + 62.5vw, 1450px);
    margin-top: clamp(40px, -6.429px + 2.321vw, 53px);
    margin-bottom: clamp(110px, -15.000px + 6.25vw, 145px);
  }

  .top-access .left {
    width: clamp(250px, -35.714px + 14.286vw, 330px);
  }

  .top-access li {
    padding: clamp(16px, -1.857px + 0.893vw, 21px) 0;
  }

  .top-access li .title {
    font-size: clamp(14.5px, -2.643px + 0.857vw, 19.3px);
  }

  .top-access li .name {
    font-size: clamp(15px, -2.857px + 0.893vw, 20px);
  }

  .top-access iframe {
    height: clamp(350px, -7.143px + 17.857vw, 450px);
  }

  /* otherpage
  ---------------------------- */
  .otherpage-title {
    max-width: 1840px;
    width: 80%;
  }

  .otherpage-title h2 .jp {
    font-size: clamp(32px, 5.333px + 1.333vw, 40px);
  }

  .otherpage-title h2 .en {
    font-size: clamp(16px, 2.667px + 0.667vw, 20px);
  }

  .otherpage-title img {
    max-width: 1840px;
    height: 600px;
    width: 100%;
  }

  /* cat-shelter.html
  -------------------------- */
  .cat-concept-inner {
    max-width: clamp(1450px, -157.143px + 80.357vw, 1900px);
    gap: clamp(105px, -20.000px + 6.25vw, 140px);
  }

  .cat-concept .text {
    max-width: clamp(550px, -110.714px + 33.036vw, 735px);
    padding-right: clamp(100px, -17.857px + 5.893vw, 133px);
  }

  .cat-concept-title {
    margin-top: clamp(41px, -5.429px + 2.321vw, 54px);
    font-size: clamp(28px, -4.143px + 1.607vw, 37px);
  }

  .cat-concept-en {
    font-size: clamp(23.5px, -3.286px + 1.339vw, 31px);
  }

  .cat-concept-text {
    margin-top: clamp(50px, -7.143px + 2.857vw, 66px);
    min-height: 9.2em;
  }

  .cat-concept-title-accest {
    width: clamp(100px, -7.143px + 5.357vw, 130px);
  }

  .cat-concept-illust-pc {
    width: clamp(165px, -31.429px + 9.821vw, 220px);
  }

  /* cat-about */
  .cat-about-inner {
    max-width: 1900px;
  }

  .cat-about-item {
    gap: clamp(110px, -25.714px + 6.786vw, 148px);
  }

  .cat-about-item h3 {
    font-size: clamp(26px, -4.357px + 1.518vw, 34.5px);
    padding-top: clamp(32px, -5.500px + 1.875vw, 42.5px);
  }

  .cat-about-item .title-en {
    height: clamp(16px, -2.929px + 0.946vw, 21.3px);
  }

  /* cat-hogo */
  .cat-terms,
  .cat-hogo,
  .cat-sotugyo {
    max-width: clamp(1300px, -92.857px + 69.643vw, 1690px);
  }

  .cat-hogo .common-title {
    margin-bottom: clamp(30px, -5.714px + 1.786vw, 40px);
  }

  .cat-hogo-list {
    margin-top: clamp(30px, -5.714px + 1.786vw, 40px);
    gap: clamp(35px, -4.286px + 1.964vw, 46px);
  }

  .cat-hogo-item {
    padding: clamp(35px, -4.286px + 1.964vw, 46px);
  }

  .cat-hogo-item,
  .cat-hogo-item .bottom-title {
    font-size: clamp(14.5px, -1.571px + 0.804vw, 19px);
  }

  .cat-hogo-item h3 {
    font-size: clamp(22px, -3.000px + 1.25vw, 29px);
    margin-bottom: 0.82em;
  }

  .cat-hogo-item ul {
    column-gap: clamp(40px, -31.429px + 3.571vw, 60px);
  }

  .cat-hogo-item li {
    padding: clamp(14px, -2.071px + 0.804vw, 18.5px) 0;
  }

  .cat-hogo-item li.sei .name {
    gap: 5px;
  }

  /* cat-sotugyo */
  .cat-sotuhyo-item {
    font-size: clamp(14px, -2.071px + 0.804vw, 18.5px);
  }

  .cat-sotuhyo-item h3 {
    font-size: clamp(22px, -3.000px + 1.25vw, 29px);
  }

  /* cafespace.html
  ----------------------- */
  .cafe-concept {
    max-width: clamp(1400px, -314.286px + 85.714vw, 1880px);
  }

  .cafe-concept .img picture {
    max-height: none;
  }

  .cafe-concept .text {
    padding-top: clamp(65px, -10.000px + 3.75vw, 86px);
  }

  .cafe-concept .text h2 {
    font-size: clamp(27px, -5.143px + 1.607vw, 36px);
  }

  .cafe-concept .accent {
    width: clamp(31px, -1.143px + 1.607vw, 40px);
    top: clamp(32px, -3.714px + 1.786vw, 42px);
  }

  /* cafe-price */
  .cafe-price {
    margin-top: clamp(105px, -20.000px + 6.25vw, 140px);
  }

  .cafe-price .inner {
    max-width: clamp(900px, -135.714px + 51.786vw, 1190px);
    padding: clamp(50px, -7.143px + 2.857vw, 66px) clamp(80px, -27.143px + 5.357vw, 110px);
  }

  .card-title {
    padding-bottom: 7px;
  }

  .cafe-price .card-title .jp {
    font-size: clamp(24px, -4.571px + 1.429vw, 32px);
  }

  .card-title .en {
    font-size: clamp(18px -3.429px + 1.071vw, 24px);
  }

  .cafe-price-list .age {
    font-size: clamp(17px, -2.643px + 0.982vw, 22.5px);
    padding-right: clamp(25px, -7.143px + 1.607vw, 34px);
  }

  .cafe-price-list .price {
    font-size: clamp(18px, -3.429px + 1.071vw, 24px);
    padding-left: clamp(25px, -7.143px + 1.607vw, 34px);
  }

  .cafe-price-list li {
    margin-top: clamp(40px, -6.429px + 2.321vw, 53px);
  }

  .cafe-price .price-note {
    font-size: clamp(11px, 0.286px + 0.536vw, 14px);
  }

  .cafe-price .note {
    font-size: clamp(13px, -2.357px + 0.768vw, 17.3px);
  }

  /* cafe-image */
  .cafe-image .inner {
    max-width: clamp(1300px, 585.714px + 35.714vw, 1500px);
  }

  /* cafe-access */
  .cafe-access {
    margin-top: clamp(90px, -17.143px + 5.357vw, 120px);
    padding-top: clamp(65px, -6.429px + 3.571vw, 85px);
  }

  .cafe-access .common-title {
    margin-bottom: clamp(40px, -13.571px + 2.679vw, 55px);
  }

  .cafe-access-inner {
    max-width: clamp(1350px, -185.714px + 76.786vw, 1780px);
    gap: clamp(65px, -6.429px + 3.571vw, 85px);
  }

  .cafe-access .left {
    width: clamp(430px, -70.000px + 25vw, 570px);
  }

  .cafe-access .left .title {
    font-size: clamp(16px, -2.929px + 0.946vw, 21.3px);
    width: clamp(130px, -20.000px + 7.5vw, 172px);
  }

  .cafe-access .left .name {
    font-size: clamp(17px, -3.000px + 1vw, 22.6px);
  }

  .cafe-access .left .address div {
    font-size: clamp(14px, -2.071px + 0.804vw, 18.5px);
  }

  .cafe-access iframe {
    max-width: none;
    width: 62%;
  }

  /* about.html
  --------------------------- */
  .about-wrap {
    max-width: clamp(1250px, 0.000px + 62.5vw, 1600px);
  }

  .about-wrap>section {
    margin-bottom: clamp(120px, 12.857px + 5.357vw, 150px);
  }

  .about-access>h2 {
    margin-bottom: clamp(40px, -13.571px + 2.679vw, 55px);
  }

  .about-about-item {
    padding: clamp(29px, -6.714px + 1.786vw, 39px) clamp(14px, -0.286px + 0.714vw, 18px);
    ;
  }

  .about-about-item .title {
    font-size: clamp(16px, -2.929px + 0.946vw, 21.3px);
  }

  .about-about-item .name {
    font-size: clamp(17px, -3.000px + 1vw, 22.6px);
  }

  .about-about-item .address span {
    font-size: clamp(14px, -2.071px + 0.804vw, 18.5px);
  }

  /* about-contact */
  .about-contact {
    padding-bottom: clamp(40px, -13.571px + 2.679vw, 55px);
  }

  .about-contact .text {
    margin-top: 2.33em;
    margin-bottom: 3em;
  }

  .about-contact-tel-wrap {
    column-gap: clamp(75px, -14.286px + 4.464vw, 100px);
  }

  .about-contact-tel-item h3 {
    font-size: clamp(17px, -2.643px + 0.982vw, 22.5px);
  }

  .about-contact-tel-item a {
    font-size: clamp(25px, -3.571px + 1.429vw, 33px);
  }

  .about-contact-tel-item .time {
    font-size: clamp(14.5px, -1.571px + 0.804vw, 19px);
  }

  /* about-access */
  .about-access-info {
    max-width: clamp(650px, -100.000px + 37.5vw, 860px);
  }

  .about-access-info-item {
    padding: clamp(15px, -2.857px + 0.893vw, 20px) 0;
  }

  .about-access-info-item .title {
    width: clamp(80px, -9.286px + 4.464vw, 105px);
  }

  /* service.html
  ------------------------ */
  .b-service-inner {
    max-width: clamp(1350px, -114.286px + 73.214vw, 1760px);
  }

  .b-service-title-wrap {
    padding-top: clamp(30px, -5.714px + 1.786vw, 40px);
  }

  .b-service-text h2 {
    font-size: clamp(28px, -4.143px + 1.607vw, 37px);
  }

  .b-service-title-wrap>span {
    font-size: clamp(14px, -2.071px + 0.804vw, 18.5px);
  }

  .b-service-text>p {
    font-size: clamp(16px, -1.857px + 0.893vw, 21px);
  }

  .b-service-img .accent {
    width: clamp(130px, 22.857px + 5.357vw, 160px);
  }

  /* b-work */
  .b-work {
    max-width: clamp(1180px, -70.000px + 62.5vw, 1530px);
  }

  .b-work .common-title .jp,
  .b-pamf-title {
    font-size: clamp(26px, -9.714px + 1.786vw, 36px);
  }

  .b-work-list {
    gap: clamp(40px, 4.286px + 1.786vw, 50px);
  }

  .b-work-item h3 {
    font-size: clamp(20px, -3.214px + 1.161vw, 26.5px);
  }

  /* b-pamf */
  .b-pamf {
    margin-top: clamp(260px, 117.143px + 7.143vw, 300px);
  }

  .b-pamf-title-wrap .sub {
    font-size: clamp(13px, -3.071px + 0.804vw, 17.5px);
  }

  .b-pamf-content {
    max-width: clamp(1500px, -142.857px + 82.143vw, 1960px);
  }

  /* b-flow */
  .b-flow {
    padding-top: clamp(120px, 12.857px + 5.357vw, 150px);
  }

  .b-flow-inner,
  .b-qa-inner {
    max-width: clamp(1120px, 48.571px + 53.571vw, 1420px);
  }

  .b-flow-item {
    padding: clamp(25px, -3.571px + 1.429vw, 33px) clamp(41px, -9.000px + 2.5vw, 55px);
  }

  .b-flow-item+.b-flow-item {
    margin-top: clamp(45px, -8.571px + 2.679vw, 60px);
  }

  .b-flow-item h3 {
    font-size: clamp(20px, -3.214px + 1.161vw, 26.5px);
  }

  .b-flow-item>.num {
    width: clamp(46px, -7.571px + 2.679vw, 61px);
    height: clamp(46px, -7.571px + 2.679vw, 61px);
    font-size: clamp(18px, 0.143px + 0.893vw, 23px);
  }

  /* 個別 */
  .b-flow-item .contact .tel {
    font-size: clamp(13px, -1.286px + 0.714vw, 17px);
  }

  .b-flow-item .contact .tel .num {
    font-size: clamp(20px, -3.214px + 1.161vw, 26.5px);
  }

  .b-flow-item .contact .note {
    font-size: clamp(12px, -2.286px + 0.714vw, 16px);
  }

  /* b-qa */
  .b-qa {
    padding-top: clamp(110px, 38.571px + 3.571vw, 130px);
  }

  .b-qa .common-title .jp {
    font-size: clamp(27px, -1.571px + 1.429vw, 35px);
  }

  .b-qa .question-inner {
    font-size: clamp(18px, -3.429px + 1.071vw, 24px);
    padding: clamp(24px, -4.571px + 1.429vw, 32px) clamp(54px, -6.714px + 3.036vw, 71px);
    padding-right: 0;
  }

  .b-qa .answer-inner {
    padding: clamp(14px, -2.071px + 0.804vw, 18.5px) 0 clamp(41px, -5.429px + 2.321vw, 54px) clamp(54px, -6.714px + 3.036vw, 71px);
  }

  .b-qa .icon {
    width: clamp(25px, -3.571px + 1.429vw, 33px);
  }

  /* concept.html
  -------------------------- */
  .concept-wrap {
    max-width: clamp(1170px, 27.143px + 57.143vw, 1490px);
  }

  .concept-wrap>section {
    margin-bottom: clamp(100px, -7.143px + 5.357vw, 130px);
  }

  .concept-title {
    font-size: clamp(22px, -3.000px + 1.25vw, 29px);
    margin-bottom: clamp(25px, -3.571px + 1.429vw, 33px);
  }

  .concept-wrap p {
    font-size: clamp(14px, -2.071px + 0.804vw, 18.5px);
  }

  /* craft.html
  --------------------- */

  .craft-about {
    max-width: clamp(1150px, 221.429px + 46.429vw, 1410px);
    max-width: clamp(1150px, 78.571px + 53.571vw, 1450px);
  }

  .craft-about-title .jp {
    font-size: clamp(24.5px, -4.071px + 1.429vw, 32.5px);
    padding: 0.163em 0.61em;
  }

  .craft-about-title .en {
    width: clamp(800px, -128.571px + 46.429vw, 1060px);
    margin-bottom: clamp(50px, -7.143px + 2.857vw, 66px);
  }

  .craft-about p {
    max-width: clamp(660px, 17.143px + 32.143vw, 840px);
  }

  /* craft-works */
  .craft-works {
    max-width: clamp(1160px, 124.286px + 51.786vw, 1450px);
  }

  .craft-works .common-title {
    margin-bottom: clamp(25px, -3.571px + 1.429vw, 33px);
    padding-bottom: 17px;
  }

  /* 404.html
  --------------------------- */
  .otherpage-title.otherpage-title-404 {
    max-width: 1200px;
  }

  .otherpage-title.otherpage-title-404,.otherpage-title.otherpage-title-404 img {
    height: 300px;
    width: 100%;
  }

  .not-found > img {
    width: clamp(639px, 64.000px + 28.75vw, 800px);
    padding: 0;
  }
}

@media (max-width: 1600px) {

  /* service.html
  -------------------- */
  .b-service-inner {
    gap: 70px;
    left: 0;
    padding-left: 0;
    padding-right: 10px;
  }

  .b-service-img {
    right: 0;
  }

}

@media (max-width: 1400px) {

  /* index.html
  -------------------- */
  .top-concept {
    justify-content: flex-end;

  }

  .top-concept .left {
    margin: 0;
    top: 60px;
    left: 100px;
    z-index: 2;
    position: absolute;
  }

  .top-concept .right {
    width: 790px;
    /* padding-bottom: 100px; */
  }

  .top-concept picture {
    margin-right: clamp(-110px, -330.000px + 20vw, -50px);
  }

  /* cafespace.html
  --------------------- */
  .cafe-access iframe {
    width: 58%;
  }

  /* catshelter.html
  ----------------------- */

  .cat-concept-inner .img {
    width: 54%;
  }
}

@media (max-width: 1300px) {

  /* index.html
  -------------------- */

}


@media (max-width: 1200px) {

  /* 共通
  --------------------- */
  /* global-menu */
  .menu-popup-inner {
    padding-right: 31px;
  }

  /* footer */
  .footer-nav {
    gap: 60px;
  }

  .footer-nav-list {
    width: 240px;
  }

  /* index.html
  -------------------- */
  .top-concept .left {
    left: 80px;
  }

  .top-concept .right {
    width: 740px;
  }

  .top-access-inner {
    padding-left: 50px;
  }

  /* otherpage
  ------------------- */
  .otherpage-title {
    padding: 0;
  }

  .otherpage-title img {
    border-radius: 0;
    height: 430px;
  }

  .otherpage-title h2 {
    bottom: 10%;
    left: 6%;
    /* left:65px; */
  }

  /* catshelter.html
  -------------------------- */
  .cat-concept .text {
    margin-top: 35px;
    padding-right: 70px;
  }

  .cat-concept .shape {
    transform: translate(10%, -52%) scale(1.5);
  }

  /* about */
  .cat-about-item {
    align-items: flex-start;
  }

  /* service.html
  -------------------- */
  .b-service-img {
    width: 40%;
  }

  /* 404.html
  --------------------------- */
  .otherpage-title.otherpage-title-404,.otherpage-title.otherpage-title-404 img {
    height: 300px;
    width: 100%;
  }

  .otherpage-title.otherpage-title-404 {
    margin-bottom: 70px;
  }
}

@media (max-width: 1100px) {

  /* index.html
  ------------------------ */
  .hero .logo {
    width: 180px;
    width: clamp(141px, 105.900px + 7.8vw, 180px);
  }

  .hero-inner {
    gap: 100px;
  }

  .hero .left {
    width: 420px;
  }

  .hero .right p {
    font-size: 1.7rem;
  }

  /* top-concept */
  .top-concept {
    flex-direction: column-reverse;
    gap: 0;
    padding-bottom: clamp(110px, 43.333px + 13.333vw, 170px);
  }

  .top-concept .left {
    /* width: 70%; */
    width: 100%;
    padding: 0 clamp(25px, -47.900px + 16.2vw, 106px) 0;
    max-width: none;
    margin: auto;
    position: relative;
    top: 0;
    left: 0;
    /* left: 50%;
    transform: translate(-50%,0); */
  }

  .top-concept-title .item {
    font-size: clamp(2.5rem, 2.0909rem + 0.909vw, 3rem);
    letter-spacing: .04em;
  }

  .top-concept-concept {
    font-size: clamp(1.6rem, 1.1909rem + 0.909vw, 2.1rem);
    margin-bottom: clamp(25px, 4.545px + 4.545vw, 50px);
  }

  .top-concept-text {
    font-size: clamp(1.4rem, 1.3182rem + 0.182vw, 1.5rem);
  }

  .top-concept picture {
    margin-bottom: -100px;
    margin-right: -50px;
    width: 80%;
  }

  .top-concept .right {
    width: 100%;
  }

  /* top-cafe */
  .top-cafe {
    padding-left: 20px;
    padding-right: 20px;
  }

  .top-cafe-inner {
    gap: 25px;
  }

  .top-cafe-item {
    width: 85%;
    max-width: 750px;
  }

  /* top-shop */
  .top-shop {
    padding-bottom: clamp(90px, -10.000px + 20vw, 180px);
  }

  .top-shop-inner {
    width: 85%;
    max-width: 750px;
    padding: 0 20px;
    margin: 65px auto 0;
  }

  .top-shop-item,
  .top-shop-item:nth-of-type(even) {
    flex-direction: column-reverse;
    gap: 40px;
  }

  .top-shop-item-info-sp {
    display: flex;
    margin-bottom: 1em;
    font-size: clamp(1.45rem, 1.1722rem + 0.556vw, 1.7rem);
  }

  .top-shop-item-info-pc {
    display: none;
  }

  .top-shop-item-title {
    font-size: 2.5rem;
    font-size: clamp(21px, 14.333px + 1.333vw, 25px);
  }

  .top-shop-item .text {
    width: 100%;
  }

  .top-shop-item .img {
    width: 100%;
  }

  .top-shop-item .img .right {
    min-height: 0;
  }

  .top-shop-item-accent,
  .top-shop-item:nth-of-type(even) .top-shop-item-accent {
    transform: translate(25%, 25%);
    left: auto;
    right: 0;
    width: clamp(112px, 5.333px + 21.333vw, 176px);
  }

  /* top-craft */
  .top-craft {
    padding: 110px 0 170px;
  }

  .top-craft-inner {
    padding: 0 20px;
    width: 85%;
    max-width: 750px;
    flex-direction: column-reverse;
    gap: 63px;
  }

  .top-craft-title .img {
    width: clamp(240px, 143.333px + 19.333vw, 298px);
  }

  .top-craft-title .text {
    font-size: clamp(1.6rem, 0.6rem + 2vw, 2rem);
  }

  /* text */
  .top-craft .left {
    width: auto;
  }

  .top-craft-title {
    flex-direction: column-reverse;
    gap: 45px;
  }

  /* image */
  .top-craft .right {
    height: auto;
    width: 100%;
  }

  .top-craft .right .img {
    aspect-ratio: 16/11;
    height: auto;
  }

  .top-craft .right .accent {
    right: 0;
    left: auto;
    transform: translate(32%, 40%);
  }

  /* cafespace.html
  ------------------------ */
  .cafe-concept {
    flex-direction: column-reverse;
    margin: auto;
    width: 85%;
    max-width: 750px;
    padding: 0;
  }

  .cafe-concept .img {
    width: 100%;
  }

  .cafe-concept .img picture {
    height: auto;
  }

  .cafe-concept .img img {
    margin: auto;
    height: auto;
  }

  .cafe-concept .text {
    margin: 0 45px;
    margin: 0 clamp(10px, -19.167px + 5.833vw, 45px);
    padding-top: 33px;
  }

  .cafe-concept .text h2 {
    font-size: clamp(2.4rem, 2.0667rem + 0.667vw, 2.7rem);
  }

  .cafe-concept .accent {
    top: 0;
  }

  /* price */
  .cafe-price .inner {
    width: 85%;
    max-width: 800px;
    padding: clamp(30px, 7.778px + 4.444vw, 50px) clamp(30px, -25.556px + 11.111vw, 80px) 50px;
  }

  .cafe-price .card-title .jp {
    font-size: clamp(1.8rem, 1.1333rem + 1.333vw, 2.4rem);
  }

  .cafe-price-list .age {
    font-size: clamp(1.5rem, 1.2778rem + 0.444vw, 1.7rem);
  }

  .cafe-price-list .price {
    font-size: clamp(1.7rem, 1.4778rem + 0.444vw, 1.9rem);
  }

  /* cafe-image */
  .cafe-image .inner {
    width: 85%;
    max-width: 800px;
  }

  .cafe-image picture {
    width: 46%;
  }

  /* cafe-access */
  .cafe-access-inner {
    width: 85%;
    max-width: 800px;
    flex-direction: column-reverse;
    padding: 0;
  }

  /* map */
  .cafe-access iframe {
    width: 100%;
  }

  /* left */
  .cafe-access .left {
    width: 100%;
  }

  .cafe-access .left ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  .cafe-access .left li {
    width: 48%;
    width: calc(50% - 22px);
    flex-direction: column;
    padding: 17px 0;
  }

  .cafe-access .left .address {
    margin-top: 2px;
  }

  .cafe-access .left li:nth-of-type(1) {
    order: 1;
  }

  .cafe-access .left li:nth-of-type(2) {
    order: 3;
  }

  .cafe-access .left li:nth-of-type(3) {
    order: 5;
  }

  .cafe-access .left li:nth-of-type(4) {
    order: 2;
  }

  .cafe-access .left li:nth-of-type(5) {
    order: 4;
  }

  /* catshelter.html
  ----------------------- */
  .cat-concept-inner {
    gap: 0;
    flex-direction: column-reverse;
  }

  /* image */
  .cat-concept-inner .img {
    width: 75%;
    transform: translateX(15%);
    position: relative;
  }

  /* text */
  .cat-concept .text {
    margin-top: 0;
    transform: translate(-15%, -10%);
    padding: 0;
    width: 470px;
  }

  .cat-concept .shape {
    /* right: 50%; */
    /* transform: translate(50%, -50%) scale(1.65); */
    /* transform-origin: center; */
    right: 0;
    transform: translate(30%, -50%) scale(1.65);
  }

  /* illust */
  .cat-concept-illust-pc {
    display: none;
  }

  .cat-concept-illust-sp {
    display: block;
    position: absolute;
    bottom: 0;
    transform: translate(100%, 40%);
    right: 50%;
    width: 165px;
  }

  /* about */
  .cat-about-item,
  .cat-about-item:nth-of-type(1) {
    flex-direction: column-reverse;
  }

  .cat-about-item {
    align-items: center;
    gap: 30px;
  }

  .cat-about-item .text {
    width: 70%;
  }

  .cat-about-item .img {
    width: 75%;
  }

  /* cat-terms */
  .cat-terms-content .img {
    width: 35%;
  }

  /* cat-hogo */
  .cat-hogo-item {
    padding: 25px;
  }

  .cat-hogo-item ul {
    column-gap: 30px;
  }

  .cat-hogo-item li .title {
    width: 5em;
  }

  /* service.html
  -------------------- */
  .b-service {
    padding: 0 0 70px;
  }

  .b-service-inner {
    flex-direction: column-reverse;
    position: relative;
    align-items: flex-end;
    padding: 0;
    gap: 0;
  }

  /* text */
  .b-service-text {
    width: 100%;
    padding: 0 clamp(25px, -45.833px + 14.167vw, 110px);
    padding: 0 10%;
    margin-top: -30px;
    position: relative;
    z-index: 1;
  }

  .b-service-text h2 {
    letter-spacing: 0.06em;
    line-height: 2.1;
    font-size: clamp(2.4rem, 1.9556rem + 0.889vw, 2.8rem);
    margin-bottom: 0.9em;
  }

  .b-service-text h2>span {
    display: block;
  }

  .b-service-text>p {
    font-size: clamp(1.4rem, 1.1778rem + 0.444vw, 1.6rem);
    line-height: 2.8;
  }

  /* img */
  .b-service-img {
    /* width: 65%; */
    width: 70%;
  }

  .b-service-img .accent {
    display: none;
  }

  .b-service-text .accent-sp {
    display: block;
    text-align: right;
    margin-top: 40px;
  }

  .b-service-text .accent-sp img {
    display: inline-block;
    width: 180px;
    width: clamp(142px, 99.778px + 8.444vw, 180px);
  }

  /* pamflet */
  .b-overlay {
    transform: translateY(-100%) scaleY(1.3);
  }

  .b-pamf {
    margin-top: 220px;
  }
}

@media (max-width: 950px) {
  body {
    /* 500-950 */
    font-size: clamp(1.4rem, 1.2889rem + 0.222vw, 1.5rem);
  }

  /* circle-button */
  .circle-button {
    font-size: clamp(1.4rem, 1.1778rem + 0.444vw, 1.6rem);
  }

  .circle-button span {
    width: clamp(80px, 66.667px + 2.667vw, 92px);
    height: clamp(80px, 66.667px + 2.667vw, 92px);
  }

  /* common-title */
  .common-title .jp {
    font-size: clamp(2.5rem, 2.0556rem + 0.889vw, 2.9rem);
  }

  /* footer */
  .footer {
    margin-top: 150px;
  }

  .footer-inner {
    flex-direction: column-reverse;
    padding-bottom: 100px;
  }

  /* footer-info */
  .footer-info {
    text-align: center;
    margin-top: 60px;
  }

  .footer-info-inner {
    display: inline-block;
    text-align: left;
  }

  /* footer-nav */
  .footer-nav {
    justify-content: center;
  }

  .footer-nav-list {
    width: 35%;
    min-width: 210px;
  }

  /* index.html
  ---------------------------- */
  .hero .logo-wrap {
    left: 30px;
    gap: 15px;
  }

  .hero-inner {
    flex-direction: column;
    align-items: center;
  }

  .hero .left {
    /* width: clamp(300px, 207.313px + 22.388vw, 420px); */
    width: clamp(320px, 230.000px + 20vw, 420px);
  }

  .hero .right {
    width: 100%;
    padding: 50px clamp(18px, -135.000px + 34vw, 188px) 0;
  }

  .hero .right p {
    font-size: clamp(1.65rem, 1.4833rem + 0.333vw, 1.8rem);
  }

  .hero .title img {
    width: clamp(42px, 26.552px + 3.731vw, 62px);
  }

  .hero-clover1 {
    width: clamp(82px, 55.739px + 6.343vw, 116px);
    height: clamp(82px, 55.739px + 6.343vw, 116px);
  }

  .hero-clover2 {
    width: clamp(70px, 48.373px + 5.224vw, 98px);
    height: clamp(70px, 48.373px + 5.224vw, 98px);
  }

  .hero-clover3 {
    width: clamp(55px, 38.780px + 3.918vw, 76px);
    height: clamp(55px, 38.780px + 3.918vw, 76px);
  }

  .hero-heart {
    width: 100%;
  }

  /* お知らせ top-news */
  .top-news {
    padding: 0 clamp(25px, -47.900px + 16.2vw, 106px);
    margin-top: clamp(70px, 14.444px + 11.111vw, 120px);
  }

  .top-news-inner {
    flex-direction: column;
    gap: 40px;
  }

  .top-news-title {
    padding: 0;
  }

  .top-news-title .jp {
    font-size: clamp(2rem, 1.4444rem + 1.111vw, 2.5rem);
  }

  .top-news-title .en {
    font-size: clamp(1.2rem, 0.8667rem + 0.667vw, 1.5rem);
  }

  .top-news-item {
    padding: 27px 0;
    border-top: 1px solid rgba(102, 66, 43, 0.1);
  }

  .top-news-item+.top-news-item {
    margin: 0;
  }

  .top-news-item h3 {
    font-size: clamp(1.5rem, 1.2778rem + 0.444vw, 1.7rem);
  }

  .top-news-item p {
    font-size: clamp(1.3rem, 1.0778rem + 0.444vw, 1.5rem);
  }

  /* top-cafe */
  .top-cafe-inner {
    flex-direction: column;
    align-items: center;
    gap: 50px;
  }

  .top-cafe-item {
    width: 85%;
  }

  /* top-access */
  .top-access-inner {
    width: 85%;
    max-width: 750px;
    padding: 0 20px;
    flex-direction: column-reverse;
    gap: 45px;
  }

  .top-access .left {
    width: 100%;
  }

  .top-access .left ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  .top-access .left ul li {
    width: 48%;
    width: calc(50% - 22px);
  }

  .top-access .left ul li:nth-of-type(1) {
    order: 1;
  }

  .top-access .left ul li:nth-of-type(2) {
    order: 3;
  }

  .top-access .left ul li:nth-of-type(3) {
    order: 5;
  }

  .top-access .left ul li:nth-of-type(4) {
    order: 2;
  }

  .top-access .left ul li:nth-of-type(5) {
    order: 4;
  }

  .top-access li .title {
    font-size: clamp(1.3rem, 0.10778rem + 0.444vw, 1.5rem);
  }

  /* otherpage 共通
  ---------------------------- */
  .otherpage-title {
    margin-bottom: 110px;
    margin-bottom: clamp(80px, 46.667px + 6.667vw, 110px);
  }

  /* about.html
  --------------------------- */
  .about-about-item .name,
  .about-about-item .title {
    font-size: clamp(1.5rem, 1.3889rem + 0.222vw, 1.6rem);
  }

  .about-access iframe {
    aspect-ratio: 4/3;
  }

  /* catshelter.html
  ----------------------- */
  .cat-about-item {
    gap: 30px;
    overflow: hidden;
  }

  .cat-about .common-title {
    margin: 0 25px 70px;
  }

  .cat-about-inner {
    padding: 80px 0 120px;
  }

  .cat-about-item h3 {
    font-size: clamp(2.2rem, 1.7556rem + 0.889vw, 2.6rem);
  }

  .cat-about-item .img {
    width: 100%;
    position: relative;
  }

  .cat-about-item .img .mask {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-size: contain;
    background: url(../images/bgmin.jpg) repeat;
    height: 105px;
    width: 100%;
    width: calc(100% + 10px);
    position: absolute;
    left: 0;
    transform: translateX(-5px);
    z-index: 1;
  }

  .cat-about-item .img .mask-top {
    -webkit-mask-image: url(../images/cat-about-overlay2.svg);
    -webkit-mask-position: top;
    mask-image: url(../images/cat-about-overlay2.svg);
    mask-position: top;
    top: -5px;
  }

  .cat-about-item .img .mask-bottom {
    -webkit-mask-image: url(../images/cat-about-overlay1.svg);
    -webkit-mask-position: bottom;
    mask-image: url(../images/cat-about-overlay1.svg);
    mask-position: bottom;
    bottom: -5px;
  }

  .cat-about-item:nth-of-type(2) .img .mask-top {
    -webkit-mask-image: url(../images/cat-about-overlay3.svg);
    mask-image: url(../images/cat-about-overlay3.svg);
  }

  .cat-about-item:nth-of-type(2) .img .mask-bottom {
    -webkit-mask-image: url(../images/cat-about-overlay4.svg);
    mask-image: url(../images/cat-about-overlay4.svg);
  }

  /* cat-terms */
  .cat-terms,
  .cat-hogo,
  .cat-sotugyo {
    padding: 0 clamp(25px, -58.333px + 16.667vw, 100px);
    max-width: 860px;
  }

  .cat-terms .common-title {
    margin-bottom: clamp(35px, 18.333px + 3.333vw, 50px);
  }

  .cat-terms-content {
    flex-direction: column;
    align-items: flex-end;
    gap: 30px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--blackrgb10);
  }

  .cat-terms-content .img {
    width: 100%;
  }

  .cat-terms-content .img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: 50% 60%;
    aspect-ratio: 16/9;
  }

  /* cat-hogo */
  .cat-hogo-list {
    display: block;
  }

  .cat-hogo-item {
    padding: 35px;
  }

  .cat-hogo-item+.cat-hogo-item {
    margin-top: 45px;
  }

  .cat-hogo-item ul {
    column-gap: 35px;
  }

  .cat-hogo-item li .title {
    width: 45%;
  }

  /* cat-sotugyo */
  .cat-sotugyo-list {
    grid-template-columns: 1fr 1fr;
  }

  /* service.html
  ------------------------- */
  .b-service-text {
    padding: 0 clamp(30px, -25.556px + 11.111vw, 80px);
  }

  /* work */
  .b-work {
    padding: 0 clamp(25px, -58.333px + 16.667vw, 100px);
  }

  .b-work-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
    row-gap: 50px;
  }

  /* pamflet */
  .b-pamf {
    margin-top: 140px;
  }

  .b-pamf-title-wrap {
    padding-top: 35px;
  }

  .b-pamf-content {
    padding: 0 clamp(25px, -58.333px + 16.667vw, 100px);
    flex-direction: column;
  }

}

@media (max-width: 900px) {

  /* ハンバーガーメニュー */
  .menu-button {
    top: 40px;
  }

  .yoyaku-button {
    top: 89px;
  }

  /* global-menu */
  .menu-popup-inner {
    flex-direction: column;
    padding: 0 10%;
  }

  .menu-popup-info {
    max-width: 400px;
  }

  /* yoyaku popup */
  .yoyaku-popup-inner {
    width: 85%;
  }
}


@media (max-width: 800px) {

  /* catshelter.html
  ------------------------ */
  .cat-concept-inner .img {
    width: 90%;
    transform: translateX(10%);
  }

  .cat-concept .text {
    width: 90%;
    transform: translate(0%, -10%);
  }

  .cat-concept-en {
    font-size: clamp(1.65rem, 0.4833rem + 2.333vw, 2.35rem);
  }

  .cat-concept-title {
    margin-top: 1.08em;
    font-size: clamp(2.4rem, 1.7333rem + 1.333vw, 2.8rem);
  }

  .cat-concept-text {
    margin-top: 2.14em;
  }

  .cat-concept .shape {
    transform: translate(-30%, -50%) scale(1.4) rotate(180deg);
    transform-origin: center;
    right: 0;
  }

  /* img */
  .cat-concept-illust-sp {
    width: clamp(108px, 4.4667rem + 12.667vw, 165px);
  }

  /* about */
  .cat-about-item .text {
    width: 80%;
  }
}

@media (max-width: 700px) {

  /* index.html
  ----------------- */
  .hero .info {
    display: none;
  }

  .top-cafe-item {
    width: 90%;
  }

  .top-shop-inner {
    width: 90%;
  }

  .top-craft-inner {
    width: 90%;
  }

  /* top-access */
  .top-access-inner {
    width: 90%;
    gap: 30px;
  }

  .top-access .left ul {
    display: block;
  }

  .top-access .left ul li {
    width: 100%;
  }

  /* abont.html
  ------------------------- */
  .about-about-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 25px 10px;
  }

  .about-about-item .title {
    width: 100%;
    margin-bottom: 5px;
  }

  /* cafespace.html
  --------------------------- */
  .cafe-access-inner {
    flex-direction: column;
  }

  .cafe-access .left ul {
    display: block;
  }

  .cafe-access .left ul li {
    width: 100%;
  }

  .cafe-access .left .title {
    font-size: clamp(1.3rem, 0.9667rem + 0.667vw, 1.6rem);
  }

  .cafe-access .left .name {
    font-size: clamp(1.5rem, 1.2778rem + 0.444vw, 1.7rem);
  }

  .cafe-access iframe {
    border-radius: 15px;
    aspect-ratio: 5/4;
  }

  /* service.html
  ------------------ */
  .b-service-img {
    width: 85%;
    right: -5%;
  }

  .b-service-text {
    margin-top: -20px;
  }

  /* work */
  .b-work-list {
    grid-template-columns: 1fr;
  }

  /* craft.html
  ------------------------- */
  .craft-works-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {

  /* ハンバーガー */
  .menu-button {
    width: 135px;
    padding: 0 15px;
    padding-left: 14px;
    height: 33px;
    right: 10px;
    top: 30px;
  }

  .menu-button .line-wrap {
    margin-left: 11px;
    height: 8px;
  }

  #menu-text {
    transform: scale(.95);
  }

  .yoyaku-button {
    right: 10px;
    top: 73px;
    font-weight: bold;
    font-size: 1.3rem;
    padding: 11px 15px;
    letter-spacing: .05em;
  }

  /* footer
  ---------------------------- */
  .footer-inner {
    padding: 75px 10% 130px;
  }

  /* footer-nav */
  .footer-nav {
    flex-direction: column;
  }

  .footer-nav-list {
    width: 100%;
  }

  .footer-nav li:first-child {
    margin-top: 18px;
  }

  .footer-nav li+li {
    margin-top: 20px;
  }

  .footer-nav {
    font-size: 1.6rem;
  }

  /* otherpage
  ------------------------- */
  .service.otherpage-title .jp {
    padding: 0;
    background-color: transparent;
  }

  .service.otherpage-title .jp span {
    background-color: #fff;
    display: block;
    padding: 5px 11px;
  }

  .service.otherpage-title .jp span:nth-of-type(1) {
    margin-bottom: 5px;
    display: inline-block;
  }


  /* index.html
  ------------------------- */
  .hero .logo-wrap {
    left: 16px;
    top: 12px;
  }

  .hero-inner {
    padding-top: 200px;
  }

  .top-news-inner {
    padding: 30px 45px 50px;
  }

  /* catshelter.html
  ------------------------ */
  /* cat-sotugyo */
  .cat-sotugyo-list {
    display: block;
  }

  .cat-sotuhyo-item+.cat-sotuhyo-item {
    margin-top: 50px;
  }

  .cat-sotuhyo-item h3 {
    font-size: 2rem;
  }

  /* service.html
  -------------------- */
  .b-flow-item {
    padding: 20px 30px 28px;
  }

  .b-flow-list::after {
    left: 15%;
  }
}

@media (max-width: 500px) {
  body {
    font-size: 1.4rem;
  }

  /* circle-button */
  .circle-button {
    font-size: 1.4rem;
    padding: 11px 0;
  }

  .circle-button span {
    width: 80px;
    height: 80px;
  }

  .circle-button span img {
    scale: 0.8;
  }

  /* common-title */
  .common-title {
    text-align: left;
    padding-bottom: 15px;
    line-height: 1.7;
    border-bottom: 1px solid var(--blackrgb10);
  }

  .common-title .jp {
    font-size: 2.4rem;
  }

  .common-title .en {
    font-size: 1.3rem;
  }

  /* global-menu */
  .menu-popup-inner {
    padding: 0 7%;
  }

  .menu-popup-nav {
    width: 100%;
  }

  .menu-popup-nav li {
    margin-bottom: 32px;
  }

  .menu-popup-nav li a {
    font-size: 1.75rem;
    gap: 14px;
  }

  .menu-popup-nav li a::before {
    width: 15px;
    height: 15px;
  }

  .menu-popup-nav h2 {
    margin-top: 65px;
  }

  .menu-popup-info-card {
    padding-bottom: 40px;
  }

  /* yoyaku popup */
  .yoyaku-popup-inner {
    width: 95%;
  }

  .yoyaku-popup-content {
    padding: 45px 20px;
  }

  .yoyaku-popup .tel-wrap {
    width: 100%;
    padding: 15px 0;
  }

  .yoyaku-close-button {
    right: 7px;
    top: 10px;
  }

  .yoyaku-popup .title {
    font-size: 1.7rem;
  }

  .yoyaku-popup p {
    font-size: 1.rem;
  }

  /* index.html
  ------------------------------ */
  /* hero */
  .hero .logo {
    width: 132px;
  }

  .hero .title img {
    width: 42px;
  }

  .hero-clover1 {
    width: 82px;
    height: 82px;
  }

  .hero-clover2 {
    width: 70px;
    height: 70px;
  }

  .hero-clover3 {
    width: 55px;
    height: 55px;
  }

  .hero-heart {
    width: 80vw;
    max-width: none;
  }

  .hero .left {
    width: 300px;
  }

  .hero .right {
    padding: 60px 22px 0;
    padding: 60px clamp(17px, -29.750px + 12.5vw, 22px) 0;
  }

  .hero .right p {
    /* line-height: 4.3; */
    /* letter-spacing: .05em; */
    font-size: 1.65rem;
    font-size: clamp(1.52rem, 0.3045rem + 3.25vw, 1.65rem);
    /* font-size: 1.5rem; */
    /* font-size: clamp(1.45rem, 0.8563rem + 1.587vw, 1.65rem); */
  }

  /* top-news */
  .top-news {
    margin-top: 70px;
  }

  .top-news-inner {
    padding: 25px 35px 45px;
  }

  .top-news-item h3 {
    font-size: 1.5rem;
  }

  .top-news-item p {
    font-size: 1.3rem;
  }

  /* top-concept */
  .top-concept {
    padding-bottom: 100px;
  }

  .top-concept-title {
    gap: 19px;
  }

  .top-concept-title .item {
    font-size: 2.4rem;
  }

  .top-concept picture {
    width: 95%;
    margin-bottom: -40px;
  }

  .top-concept .circle-button {
    margin-top: 40px;
  }

  /* top-cafe */
  .top-cafe {
    padding: 80px 5% 90px;
  }

  .top-cafe-inner {
    margin-top: 40px;
    gap: 35px;
  }

  .top-cafe-item {
    width: 100%;
    padding: 21px 25px 50px;
  }

  .top-cafe-item .card-title {
    padding-bottom: 5px;
    /* margin-bottom: 29px; */
  }

  .card-title .jp {
    font-size: 1.7rem;
  }

  .card-title .en {
    font-size: 1.1rem;
  }

  .top-cafe-item li {
    margin-top: 26px;
  }

  .top-cafe-item li .age {
    font-size: 1.5rem;
  }

  .top-cafe-item li .price {
    font-size: 1.7rem;
  }

  .top-cafe-item .note {
    margin-top: 1em;
    font-size: 1.2rem;
  }

  .circle-button-wrap {
    margin-top: 40px;
  }

  /* top-shop */
  .top-shop {
    padding: 55px 0 90px;
  }

  .top-shop .common-title {
    margin: 0 6.5%;
  }

  .top-shop .common-title .jp {
    margin: 0;
  }

  .top-shop-inner {
    width: 100%;
    padding: 0 5.5%;
  }

  .top-shop-item+.top-shop-item {
    margin-top: 115px;
  }

  .top-shop-item,
  .top-shop-item:nth-of-type(even) {
    gap: 25px;
  }

  .top-shop-item-info-sp {
    font-size: 1.45rem;
    gap: 12px;
  }

  .top-shop-item-title {
    font-size: 2.1rem;
  }

  .top-shop-item .img .right {
    aspect-ratio: 4 / 3;
  }

  /* 個別 */
  .top-shop-item.shop .img .right {
    object-position: 30% 50%;
  }

  .top-shop-item.cafe .img .right {
    object-position: 10% 50%;
  }

  .top-shop-item-accent,
  .top-shop-item:nth-of-type(even) .top-shop-item-accent {
    transform: translate(18%, 30%);
  }

  /* top-craft */
  .top-craft {
    padding: 90px 6.5% 110px;
  }

  .top-craft-inner {
    width: 100%;
    gap: 46px;
    padding: 0;
  }

  .top-craft-title {
    gap: 35px;
    margin-bottom: 40px;
  }

  .top-craft-title img {
    width: 208px;
    width: 55%;
    min-width: 208px;
  }

  .top-craft-title .text {
    font-size: 1.6rem;
  }

  .top-craft .left>p {
    margin-bottom: 2.5em;
  }

  /* .top-craft .right, */
  .top-craft .right .img {
    aspect-ratio: 4/3;
  }

  .top-craft .right .accent {
    width: 143px;
    /* transform: translate(31%, 40%); */
  }

  /* top-access */
  .top-access {
    margin-top: 70px;
    /* padding: 70px 6.5% 150px; */
    /* margin: 0; */
  }

  .top-access-inner {
    width: 100%;
    padding: 0 6.5%;
    margin-bottom: 40px;
  }

  .top-access .common-title {
    width: 87%;
    margin: auto;
  }

  .top-access li .title {
    font-size: 1.3rem;
    margin-bottom: .25em;
  }

  /* .top-access .right {
    aspect-ratio: 4/3;
  } */

  .top-access iframe {
    border-radius: 12px;
    height: 330px;
  }


  /* otherpage
  ---------------------- */
  .otherpage-title {
    margin-bottom: 80px;
  }


  .otherpage-title img {
    height: 390px;
    height: 450px;
  }

  .otherpage-title h2 {
    left: 4.5%;
    bottom: 40px;
    gap: 5px;
  }

  .otherpage-title h2 .jp,
  .service.otherpage-title .jp span {
    font-size: 2.2rem;
    padding: 4px 10px;
  }

  .otherpage-title h2 .en {
    padding: 2px 6px;
  }

  .service.otherpage-title .jp span:nth-of-type(1) {
    margin-bottom: 3px;
  }

  /* about.html
--------------------------------- */
  .about-wrap {
    padding: 0 5.6%;
  }

  .about-wrap>section {
    margin-bottom: 90px;
  }

  .about-about>h2 {
    margin-bottom: 35px;
  }

  /* about-about */
  .about-about-item {
    padding: 25px 5px;
  }

  .about-about-item .title {
    font-size: 1.5rem;
  }

  .about-about-item .name {
    font-size: 1.5rem;
  }

  /* about-contact */
  .about-contact-tel-item a {
    font-size: 2.2rem;
  }

  .about-contact-tel-item a span {
    font-size: 2rem;
  }

  .about-contact-tel-item .time {
    font-size: 1.4rem;
  }

  /* about-access */
  .about-access iframe {
    aspect-ratio: 6/5;
  }

  .about-access-info {
    width: 100%;
  }

  .about-access-info-item {
    gap: 0;
  }

  .about-access-info-item .title {
    min-width: 80px;
    width: 28%;
  }

  /* concept.html
  ---------------------------- */

  .concept-wrap {
    padding: 0 5.6%;
  }

  .concept-title {
    font-size: 1.95rem;
    gap: 11px;
    margin-bottom: 20px;
  }

  .concept-text-bottom{
    margin-top: .5em;
  }

  /* cafespace.html
  --------------------------- */
  .cafe-concept {
    padding: 0 5.5%;
    margin: auto;
    width: 100%;
    gap: 45px;
  }

  .cafe-concept .text h2 {
    font-size: 2.4rem;
  }

  .cafe-concept .text {
    margin: 0;
    padding-top: 26px;
  }

  /* price */
  .cafe-price {
    padding: 0 5%;
    margin-bottom: 60px;
  }

  .cafe-price .inner {
    width: 100%;
    margin: auto;
    padding: 27px 25px 50px;
  }

  .cafe-price .card-title .jp {
    font-size: 1.8rem;
    letter-spacing: .1em;
  }

  .cafe-price-list li {
    margin-top: 30px;
  }

  .cafe-price-list .age {
    font-size: 1.5rem;
  }

  .cafe-price-list .price {
    font-size: 1.7rem;
  }

  /* cafe-image */
  .cafe-image {
    padding: 5.5%;
    margin-top: 60px;
  }

  .cafe-image .inner {
    width: 100%;
    gap: 15px;
  }

  .cafe-image picture {
    width: 100%;
  }

  /* cafe-access */
  .cafe-access {
    padding: 70px 5.5% 0;
  }

  .cafe-access-inner {
    width: 100%;
  }

  .cafe-access iframe {
    border-radius: 15px;
    aspect-ratio: 5/4;
  }

  /* catshelter.html
  ------------------------- */
  /* text */
  .cat-concept .text {
    width: 90%;
    transform: translate(0%, 0%);
  }

  .cat-concept-en {
    font-size: 1.65rem;
  }

  .cat-concept-title {
    font-size: 2.4rem;
  }

  .cat-concept-title-accest {
    width: 88px;
    transform: translate(-15%, -50%);
  }

  .cat-concept .shape {
    transform: translate(-30%, -50%) scale(1.6) rotate(180deg);
    transform-origin: center;
    right: 0;
  }

  /* img */
  .cat-concept-inner .img {
    width: 100%;
    transform: translateX(5%);
  }

  .cat-concept-illust-sp {
    width: 108px;
    right: 40%;
  }

  /* cat-about */
  .cat-about-inner {
    padding: 70px 0 90px;
  }

  .cat-about .common-title {
    text-align: left;
    width: 89.5%;
    margin: 0 auto 25px;
  }

  .cat-about-item .text {
    width: 87%;
    margin: auto;
  }

  .cat-about-item h3 {
    font-size: 2.2rem;
    line-height: 2;
    padding-top: 30px;
    margin-bottom: 1.2em;
  }

  .cat-about-item .img img {
    object-fit: cover;
    aspect-ratio: 12/11;
  }

  /* cat-terms */
  .cat-terms,
  .cat-hogo,
  .cat-sotugyo {
    padding: 0 5.6%;
  }

  .cat-terms {
    margin-top: 70px;
  }

  .cat-terms .common-title {
    margin-bottom: 25px;
  }

  .cat-terms .common-title .jp {
    font-size: 2.3rem;
    letter-spacing: 0;
  }

  .cat-terms-content .img img {
    aspect-ratio: 3/2;
  }

  /* cat-hogo */
  .cat-hogo {
    margin-top: 90px;
  }

  .cat-hogo-item h3 {
    font-size: 2rem;
    margin-top: 0.7em;
    margin-bottom: 8px;
  }

  .cat-hogo-item {
    padding: 20px 15px 35px;
  }

  .cat-hogo-item + .cat-hogo-item {
    margin-top: 30px;
  }

  .cat-hogo-item ul {
    display: block;
  }

  .cat-hogo-item li {
    padding: 9px 0;
  }

  .cat-hogo-item li .title {
    width: 40%;
  }

  .cat-hogo-item .bottom-title {
    font-size: 1.4rem;
    margin-top: 15px;
    margin-bottom: 0.5em;
  }

  /* cat-sotugyo */
  .cat-sotugyo {
    margin-top: 90px;
  }

  .cat-sotuhyo-item h3 {
    margin-bottom: 5px;
    margin-top: .5em;
    font-size: 1.9rem;
  }

  .cat-sotuhyo-item>img {
    object-fit: cover;
    aspect-ratio: 3/2;
  }

  .cat-sotuhyo-item li {
    padding: 5px 0;
  }

  /* service.html
  ---------------------- */
  /* service */
  .b-service {
    padding-top: 0;
  }

  /* text */
  .b-service-text {
    padding: 0 5.6%;
    margin-top: -15px;
  }

  .b-service-text h2 {
    font-size: 2.4rem;
  }

  .b-service-text>p {
    font-size: 1.4rem;
    letter-spacing: 0.06em;
  }

  /* img */
  .b-service-img {
    width: 90%;
    left: 10%;
  }

  .b-service-text .accent-sp {
    margin-top: 20px;
  }

  .b-service-text .accent-sp img {
    width: 142px;
  }

  /* work */
  .b-work {
    padding: 0 5.6%;
  }

  /* pamflet */
  .b-pamf-content {
    padding: 0 5.6%;
  }

  .b-pamf-title {
    font-size: 2.4rem;
  }

  .b-pamf-content .zoom-icon img {
    width: 12px;
  }


  /* flow */
  .b-flow-inner {
    padding: 0 5.6%;
  }

  .b-flow-item+.b-flow-item {
    margin-top: 40px;
  }

  .b-flow-item h3 {
    font-size: 1.9rem;
  }

  .b-flow-list::after {
    left: 20%;
  }

  /* num */
  .b-flow-item>.num {
    font-size: 1.5rem;
    width: 36px;
    height: 36px;
  }

  /* b-qa */
  .b-qa-inner {
    padding: 0 5.6%;
  }

  .b-qa .common-title {
    margin-bottom: 40px;
  }

  .b-qa .common-title .jp {
    font-size: 2.4rem;
  }

  .b-qa .question-inner {
    font-size: 1.6rem;
    padding: 20px 0 20px 39px;
  }

  .b-qa .icon {
    width: 24px;
    left: 0;
  }

  .b-qa .answer-inner {
    padding: 10px 0 30px 39px;
  }

  /* craft.html
  --------------------------- */
  .craft-about-title {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .craft-about-title picture {
    min-width: 210px;
    width: 65%;
  }

  .craft-about-title .en {
    margin: 0;
    margin-bottom: 35px;
  }

  /* craft-works */
  .craft-works>p,
  .craft-works .common-title {
    width: 89%;
    margin-left: auto;
    margin-right: auto;
  }

  .craft-works {
    margin-top: 90px;
    padding: 0;
  }

  .craft-works .common-title {
    padding-bottom: 5px;
  }

  .craft-works-list .zoom-icon {
    padding: 3px;
  }

  .craft-works-list .zoom-icon img {
    width: 14px;
  }
    /* 404.html
  --------------------------- */
  .otherpage-title.otherpage-title-404 {
    margin-bottom: 70px;
  }

  .otherpage-title.otherpage-title-404,.otherpage-title.otherpage-title-404 img {
    height: 300px;
    width: 100%;
  }

  .not-found p {
    margin-top: 2.5em;
  }

}

@media (max-width: 374px) {

  /* index.html
  ------------------------------ */
  .hero .right p {
    font-size: 1.45rem;
    letter-spacing: 0.04em;
    line-height: 4.5;
  }

  .top-concept-title .item {
    font-size: 2.22rem;
    padding: 2px 7px;
  }

  .top-concept .left {
    padding: 18px;
  }

  /* concept.html
  ------------------------------ */
  .concept-title {
    font-size: 1.8rem;
  }

  /* catshelter.html
  ------------------------- */
  .cat-concept-title {
    font-size: 2.3rem;
  }

  .cat-concept-text {
    padding-right: 0;
  }

  .cat-concept .shape {
    transform: translate(-30%, -50%) scale(1.7) rotate(180deg);
  }

  /* cat-hogo */
  .cat-hogo-item li .title {
    width: 50%;
  }
}