@charset "utf-8";
/* CSS Document */
/*
Theme Name:木の日
Theme URL:https://kousoyoku-kinohi.com/
Description:【公式】木の日（きのひ） | 大分市の酵素風呂・脱毛サロン
Author:JOS
*/
@font-face {
  font-family: "shippori";
  src: url("font/ShipporiMincho-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "shippori-antique";
  src: url("font/ShipporiAntique-Regular.ttf") format("truetype");
  font-display: swap;
}
body {
  font-family: "shippori", sans-serif;
  line-height: 1.5;
}
html {
  /* font-size: 12px; */
}
a {
  text-decoration: none;
  color: inherit;
}
main {
  position: relative;
  top: 100px;
}
/*--------------------------------
	共通
----------------------------------- */
[class$="__inner"] {
  width: 100%;
  margin: 0 auto;
  padding: 0 13.5%;
  max-width: calc(1400px + 27%);
  /* padding: 0 10.715%; */
  /* max-width: calc(1100px + 21.43%); */
  box-sizing: border-box;
  position: relative;
}
/*--------------------------------
	header
----------------------------------- */
.header__content {
  position: fixed;
  height: 100px;
  background-image: url(img/oak.jpg);
  background-size: cover;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  z-index: 1000;
}
.header__logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #a5884d;
}
.header__logo img {
  margin: auto;
  width: 140px;
}
.breadcrumb-area {
  margin-top: 40px;
}
.header__nav-menu {
  position: fixed;
  display: block;
  right: 0;
  top: 100px;
  height: calc(100vh - 100px);
  width: 100%;
  padding: 7rem 5% 0;
  background: rgba(0, 0, 0, .8);
  -webkit-transition: all .5s;
  transition: all .5s;
  visibility: hidden;
  opacity: 0;
  z-index: 100;
}
.spacer {
    clear: both;
    font-size: 0px;
}
.hover_image {
  transition: .3s cubic-bezier(0.5, 1, 0.89, 1);
}
.hover_image:hover {
  transform: scale(1.1);
}
.p-hover {  
  transition: .3s cubic-bezier(0.5, 1, 0.89, 1);
}
.p-hover:hover {
  background: #ffffff;
  color: #513535;
  font-weight: bold;
  transform: scale(1.1);
  border: 1px solid #513535!important;
}
.wr-hover {  
  transition: .3s cubic-bezier(0.5, 1, 0.89, 1);
}
.wr-hover:hover {
  background: #ffffff!important;
  color: #513535!important;
  font-weight: bold;
  transform: scale(1.1);
  border: 1px solid #513535!important;
}
/*--------------------------------
	menu
----------------------------------- */
.menu {
  width: 100%;
}
.menu__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
}
.menu__item {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.menu__item a {
  color: #fff;
  font-size: clamp(1rem, 1.248vw, 1.5rem);
}
.n_level {
  color: #D1AD59;
}
/*--------------------------------
	office section
----------------------------------- */
.office {
  position: relative;
  margin-top: 100px;
}
.office__background {
  background-color: #c1ad85;
  padding: 70px 0;
}
.office__content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
.office__info {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 20px;
  color: #fff;
  font-size: clamp(0.75rem, 0.936vw, 1.125rem); /* 18px */
  line-height: 2;
}
.office__address {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.office__logo {
  margin: 0 auto;
}
.office__logo img {
  width: 100%;
  max-width: 178px;
  margin-top: 10px;
  display: block;
}
.office__list {
  display: flex;
  flex-direction: column;
  align-items: start;
  margin-top: 10px;
}
.office__item {
  text-align: left;
}
.office__item span {
  display: block;
}
.office__sns {
  display: flex;
  gap: 20px;
}
.office__sns i {
  font-size: clamp(1.3rem, 1.56vw, 1.875rem);
}
.office__note {
  text-align: left;
}
.office__map {
  position: relative;
  width: 100%;
  height: 60vw;
  max-height: 525px;
  filter: grayscale(100%);
}
/* Google Mapのiframe */
.office__map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*--------------------------------
	footer
----------------------------------- */
.footer__background {
  background-image: url(img/oak.jpg);
  background-size: cover;
  text-align: center;
  padding: 50px 0;
}
.footer__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}
.footer__menu {
  display: flex;
  gap: 20px;
  color: #b29d6b;
  font-size: clamp(0.8rem, 1.04vw, 1.25rem);
}
.footer__reserve {
  color: #fff;
  width: 80%;
  max-width: 300px;
  padding: 1.2em 0;
  background-color: #b29d6b;
  border-radius: 9999px;
  border: 1px solid #fff;
	transition: .3s cubic-bezier(0.5, 1, 0.89, 1);
}

.footer__reserve:hover {
  background: #fff;
  color: #b29d6b;
	font-weight: bold;
  transform: scale(1.1);
  border: 1px solid #b29d6b;
}

.footer__copyright {
  color: #b29d6b;
  font-size: clamp(0.75rem, 0.936vw, 1.125rem);
}
.to_top {
  position: fixed;
  right: 20px;
  bottom: 95px;
  width: 70px;
  height: 70px;
  z-index: 9999;
  background: #3D2A2A;
  color: #A5884D;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}
.fa-arrow-up {
  font-size: 1.925rem;
}
/*--------------------------------
	TB用
----------------------------------- */
@media all and (max-width: 768px) {
  /*----------------- 
   共通
  -------------------*/
  [class$="__inner"] {
    padding: 0 7.5%;
  }
  .office__content {
    flex-direction: column;
  }
  .office__map {
    height: 300px;
  }
  .office__info {
    align-items: center;
  }
  .office__item span {
    display: inline-block;
  }
  .to_top {
    right: 10px;
    bottom: 80px;
    width: 40px;
    height: 40px;
  }
  .fa-arrow-up {
    font-size: 1.925rem;
  }
}
/*--------------------------------
	SP用
----------------------------------- */
@media all and (max-width: 530px) {
  /*----------------- 
   共通
  -------------------*/
  [class$="__inner"] {
    padding: 0 5%;
  }
	.footer__menu li{
		font-size: 0.75rem
	}
}