:root {
  --ink: #332f2b;
  --gold: #b07a32;
  --line: #e0d7cb
}
* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body {
  margin: 0;
  color: var(--ink);
  background: #f2edea;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  line-height: 1.8
}
a {
  color: inherit;
  text-decoration: none
}
img {
  display: block;
  max-width: 100%
}

/* header */
.header {
  height: .96rem;
  padding: 0 max(.34rem, calc((100vw - 12rem)/2));
  background: #fffffff5;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 20
}
.header_inner {
  width: 100%;
  gap: .46rem;
  display: flex;
}
.logo {
  width: 2.35rem;
  margin-right: auto
}
.header_inner nav ul {
  display: flex;
  gap: .42rem;
  font-size: .14rem;
  white-space: nowrap
}

.header_inner nav a {
  padding: .36rem 0
}

.contact-img {
  width: 1.46rem
}
.menu {
  display: none
}

/* main */
.hero {
  margin: auto;
  background: #f5f6f5;
}
.hero-mainimg {
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}
.hero-btn {
  position: absolute;
  bottom: .4rem;
  left: .4rem;
  max-width: 1.87rem;
  width: 2rem;
}

.hero-copy {
  padding: .75rem .22rem .5rem max(.38rem, calc((100vw - 12.8rem)/2));
  align-self: center;
  z-index: 2
}
.hero h1 {
  margin: 0 0 .24rem;
  font-size: clamp(.38rem, 3.5vw, .6rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .12em
}
.hero-brand {
  font-size: .25rem
}
.hero-brand span {
  font-size: .13rem;
  margin-left: .06rem
}
.hero-copy > p:last-child {
  font-size: .13rem;
  line-height: 2.15
}
.hero-photo {
  overflow: hidden;
  clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%)
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* business */
.section {
  margin: auto;
  padding: .78rem 0 .2rem
}
.section-title {
  text-align: center;
  margin-bottom: .25rem
}
.section-title p {
  margin: 0;
  color: var(--gold);
  font-size: .34rem
}
.section-title h2 {
  margin: 0;
  font-size: .2rem;
  font-weight: 500
}
.business {
  margin: auto;
}

/* more-btn */
.more-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: .34rem;
  padding: 0 .3rem 0 .16rem;
  border: 1px solid #c9a66e;
  border-radius: 999px;
  color: #a87535;
  font-size: var(--stacksize_12);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .12em;
  white-space: nowrap;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease
}
.more-btn::after {
  content: "?";
  position: absolute;
  right: .14rem;
  top: 50%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .17rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  transform: translateY(-54%);
  transition: transform .25s ease
}
.more-btn:hover {
  color: #fff;
  background-color: #b88949;
  border-color: #b88949;
  opacity: 1
}
.more-btn:hover::after {
  transform: translate(.03rem, -54%)
}
.more-btn:focus-visible {
  outline: 2px solid #b88949;
  outline-offset: 3px
}

.business-card {
  min-height: 3.9rem;
  border: 1px solid var(--line);
  border-radius: .04rem;
  overflow: hidden;
  margin: .22rem 0;
}

.business-card:first-of-type {
  background: url("../images/business_bg04.png") no-repeat left bottom;
  background-size: contain;
}
.business-card.reverse .business-copy {
  margin-left: auto;
  width: 50%;
}
.business-card:nth-of-type(2) {
  background: url("../images/business_bg01.png") no-repeat right bottom;
  background-size: contain;
}
.business-card:nth-of-type(3) {
  background: url("../images/business_bg02.gif") no-repeat left bottom;
  background-size: contain;
}
.business-card:last-of-type {
  background: url("../images/business_bg03.gif") no-repeat right bottom;
  background-size: contain;
}


.business-card > p img,
.nameneko > p img {
  width: 100%;
}

.business-copy {
  padding: .26rem .38rem
}
.business-copy b {
  display: block;
  color: var(--gold);
  font-size: .46rem;
  line-height: 1.05
}
.business-copy small {
  display: block;
  color: var(--gold);
  font-size: .12rem;
  letter-spacing: .1em
}
.business-copy h3 {
  margin: 0;
  font-size: .26rem;
  font-weight: 500
}
.business-copy p {
  margin: .04rem 0;
  font-size: .17rem;
  line-height: 1.6
}
.business-copy ul {
  margin: .04rem 0 .1rem;
  padding-left: 1.2em;
  font-size: var(--stacksize_14);
  list-style : disc;
}
.business-copy ul li::marker {
  font-size: 1.1em;
}


.concert {
  background-position: left
}
.home {
  background-position: center
}
.cats {
  background-position: right
}
.panel {
  margin: .14rem auto;
  border: 1px solid var(--line);
  background: #f8f7f6;
  border-radius: .03rem
}


/* nameneko */
.nameneko {
  display: grid;
  grid-template-columns: 48% 52%;
  min-height: 3.5rem;
  background: url("../images/nameneko_bg.png") no-repeat right bottom;
  background-size: contain;
  border: 1px solid var(--line);
  border-radius: .04rem;
}
.nameneko_inner {
  padding: .35rem;
}
.nameneko h2 {
  font-size: var(--stacksize_24);
  font-weight: 500;
  margin-bottom: .2rem;
}
.nameneko p {
  font-size: var(--stacksize_14);
  line-height: 1.6;
}
.nameneko p.kicker {
  margin: 0 0 .08rem;
  font-size: var(--stacksize_20);
}


.info-wrap {
  padding-inline: 0
}
.info {
  min-height: 1.5rem;
  padding: .25rem .35rem .25rem 1.9rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .4rem;
}
.info h2 {
  grid-column: 1/-1;
  margin: 0;
  font-size: var(--stacksize_22);
  font-weight: 500
}
.info p, .info dl,.info ul {
  margin: .05rem 0;
  font-size: var(--stacksize_14);
  line-height: 1.6
}
.round-icon {
  position: absolute;
  left: .45rem;
  top: .24rem;
  width: 1.05rem;
  height: 1.05rem;
}
.round-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.info dl {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	flex-wrap: wrap;
	align-items: stretch;	
	width: 100%;
}
.info dl dt{
	width: .8rem;
}
.info dl dd{
	width: calc(100% - .8rem);
}

.contact {
  min-height: 1.65rem;
  padding: .3rem .44rem .3rem 1.9rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  position: relative;
}
.contact .phone {
  color: #342f2a
}
.contact h2 {
  margin: 0;
  font-size: .22rem;
  font-weight: 500
}
.contact p {
  margin: 2px 0;
  font-size: .13rem
}
.contact strong {
  font-size: .3rem
}
.contact > a {
  margin-left: auto;
  color: #fff;
  background: linear-gradient(90deg, #b88235, #d8ad68);
  border-radius: .25rem;
  padding: .1rem .3rem;
  min-width: 2.6rem;
  text-align: center;
  font-size: .14rem
}
.company {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: .15rem;
  min-height: 2.4rem
}
.company > div {
  padding: .42rem .5rem
}
.company > div + div {
  border-left: 1px solid var(--line)
}

.company-brand {
  display: flex;
  align-items: center;
}
.company-brand p, .company p {
  font-size: var(--stacksize_14);
}
.company-brand p {
  margin-top: .1rem;
}
.social {
  margin-top: .12rem
}
.social ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .1rem;
  width: max-content
}
.social li {
  flex: 0 0 .28rem;
  width: .28rem;
  height: .28rem
}
.social a,
.social img {
  display: block;
  width: 100%;
  height: 100%
}
.social img {
  object-fit: contain
}
.gold {
  color: var(--gold);
  margin-bottom: .1rem;
  font-size: .16rem !important
}
footer {
  padding: .22rem;
  text-align: center;
  color: #eee;
  background: #29251f;
  font-size: .12rem
}
@media(max-width:900px) {
  .header {
    height: .74rem;
    padding: 0 .18rem
  }
  .header h1 {
    width: 35vw;
  }
  .contact-img {
    display: none
  }
  .menu {
    width: .44rem;
    height: .44rem;
    display: flex;
    position: relative;
    z-index: 2;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .06rem;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer
  }
  .menu span {
    width: .27rem;
    height: 1px;
    background: #333;
    transition: transform .35s ease, opacity .25s ease
  }
  .header.open .menu span:nth-child(1) {
    transform: translateY(.07rem) rotate(45deg)
  }
  .header.open .menu span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0)
  }
  .header.open .menu span:nth-child(3) {
    transform: translateY(-.07rem) rotate(-45deg)
  }
  .header nav {
    display: flex;
    position: absolute;
    top: .74rem;
    left: 0;
    right: 0;
    padding: .18rem;
    flex-direction: column;
    gap: 0;
    background: #fff;
    box-shadow: 0 .1rem .2rem #0001;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-.24rem);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, visibility 0s linear .4s
  }
  .header.open nav {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s
  }
  .header nav a {
    padding: .1rem
  }
  .hero {
    grid-template-columns: 1fr
  }
  .hero-copy {
    padding: .48rem .24rem
  }
  .hero-photo {
    height: 3.9rem;
    clip-path: none;
    order: -1
  }
  .hero h1 {
    font-size: .36rem
  }
  .business-card.reverse .business-copy {
    margin-left: 0;
    width: 100%;
  }
  .business-card:first-of-type {
    background: url("../images/business_bg04_sp.png") no-repeat right bottom;
    background-size: contain;
  }
  .business-card:nth-of-type(2) {
    background: url("../images/business_bg01_sp.png") no-repeat 110% bottom;
    background-size: contain;
  }
  .business-card:nth-of-type(3) {
    background: url("../images/business_bg02.gif") no-repeat left bottom;
    background-size: contain;
  }
  .business-card:last-of-type {
    background: url("../images/business_bg03.gif") no-repeat left bottom;
    background-size: cover;
  }
  .business-card .card-photo {
    min-height: 2.5rem;
    order: -1
  }
  
  
  .business-copy {
    padding: .26rem
  }
  .nameneko {
    grid-template-columns: 1fr;
    background: none;
    }
  .nameneko-photo img {
    width: 100%;
  }
  .info {
    padding: .25rem;
    display: block
  }
  .nameneko .more-btn,
  .info .more-btn {
    width: 100%;
  }
  .round-icon {
    position: static;
    display: grid;
    width: .8rem;
    height: .8rem;
    margin: 0 auto .16rem
  }
  .contact {
    padding: .25rem;
    display: block
  }
  .contact > a {
    display: block;
    margin: .2rem 0 0
  }
  .company {
    grid-template-columns: 1fr
  }
  .company > div + div {
    border: 0;
    border-top: 1px solid var(--line)
  }
}
@media(max-width:900px) and (prefers-reduced-motion:reduce) {
  .menu span, .header nav {
    transition: none
  }
}
/*
@media(max-width:560px) {
  .section {
    padding: .55rem .14rem
  }
  .section-title p {
    font-size: .28rem
  }
  .section-title h2 {
    font-size: .15rem
  }
  .hero-photo {
    height: 2.7rem
  }
  .hero h1 {
    font-size: .31rem
  }
  .business-copy h3 {
    font-size: .24rem
  }
  .nameneko > div:first-child, .company > div {
    padding: .27rem .22rem
  }
  .info-wrap {
    padding: 0 .1rem
  }
  .contact strong {
    font-size: .24rem
  }
  .contact > a {
    min-width: 0
  }
  .company {
    margin-inline: .1rem
  }
}
*/