@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

body {
 background: #fff;
 color: #000;
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 18px;
 line-height: 1.6;
}

@media screen and (min-width: 769px) {
 .pc_none {
  display: none;
 }
}

@media screen and (max-width: 768px) {
 body {
  font-size: 16px;
 }

 .sp_none {
  display: none;
 }
}

* {
 box-sizing: border-box;
}

a {
 color: #000;
}

img {
 width: 100%;
 height: auto;
 object-fit: cover;
}

:root {
 --main-color: #C1AC91;
 --sub-color: #DECEB9;
 --sub02-color: #C6883F;
 --lower-color: #F8F2EA;
}

.l-header {
 padding: 40px 20px;
 position: absolute;
 margin: -260px auto 0;
 height: 220px;
 width: 100%;
 z-index: 999;
 background: rgba(255, 255, 255, 0.7);
}

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

@media screen and (max-width: 768px) {
 .l-header {
  position: fixed;
  padding: 20px 30px;
  margin: 0px auto;
  height: auto;
  position: relative;
  background: none;
  z-index: 1;
 }
}

.l-header__logo {
 margin: 0 auto;
 width: 70px;
 text-align: center;
 height: auto;

 font-weight: bold;
}

@media screen and (max-width: 768px) {
 .l-header__logo {
  margin: 0 0;
  width: 40px;
  text-align: left;
  height: auto;
 }
}

.l-header__tel {
 position: absolute;
 right: 20px;
 top: 40px;
 text-align: center;
 line-height: 1.4;
}

.l-header__tel p {
 font-size: 16px;
 font-weight: bold;
}

.l-header__tel a {
 font-size: 20px;
 font-weight: bold;
 background: #C6883F;
 padding: 10px 20px;
 border-radius: 30px;
 color: #fff;

}

.l-header__gnav-wrap {
 display: grid;
 grid-template-columns: repeat(6, 1fr);
 justify-content: center;
 gap: 30px;
 padding: 40px 0 0px;
}

.l-header__gnav-item {
 font-size: 18px;
 position: relative;
 line-height: 1.8;
 text-align: center;
}

.l-header__gnav-item span {
 font-size: 14px;
}

.l-header__gnav-item a:hover {
 opacity: 1;
}

.l-header__gnav-item:hover::after {
 position: absolute;
 bottom: 22px;
 height: 3.5px;
 width: 30px;
 left: calc(50% - 15px);
 transform: translate(0%, -50%);
 -webkit-transform: translate(0%, -50%);
 -ms-transform: translate(0%, -50%);
 background: #000;
 content: "";
}


.c-nav-item {
 font-weight: bold;
}

.c-nav-item span {
 display: block;
}

.p-mainvisual {
 position: relative;
 height: 800px;
 margin-top: 260px;
}

@media screen and (max-width: 768px) {
 .p-mainvisual {
  position: relative;
  height: 480px;
  margin-top: 0px;
 }
}

.p-mainvisual__bg-image {
 position: absolute;

 /* content: "";
	background: url(../img/bg-mv.jpg) no-repeat center left / cover; */
 width: 90%;
 height: 800px;
 border-radius: 150px 0 0 0;
 right: 0;
 animation: fadeBackground 12s infinite;

}

@keyframes fadeBackground {
 0% {
  background: url(../img/bg-mv1.jpg) no-repeat center left / cover;
  opacity: 1;
 }

 33.33% {
  background: url(../img/bg-mv2.jpg) no-repeat center left / cover;
  opacity: 1;
 }

 66.66% {
  background: url(../img/bg-mv3.jpg) no-repeat center left / cover;
  opacity: 1;
 }

 100% {
  background: url(../img/bg-mv1.jpg) no-repeat center left / cover;
  opacity: 1;
 }
}

@media screen and (max-width: 768px) {

 .p-mainvisual__bg-image {
  position: absolute;
  width: 100%;
  height: 480px;
  border-radius: 150px 0 0 0;
  right: 0;

 }

 @keyframes fadeBackground {
  0% {
   background: url(../img/bg-mv1.jpg) no-repeat center center / cover;
   opacity: 1;
  }

  33.33% {
   background: url(../img/bg-mv2.jpg) no-repeat center center / cover;
   opacity: 1;
  }

  66.66% {
   background: url(../img/bg-mv3.jpg) no-repeat center center / cover;
   opacity: 1;
  }

  100% {
   background: url(../img/bg-mv1.jpg) no-repeat center center / cover;
   opacity: 1;
  }
 }
}

.c-bg-white {
 background: #fff;
}

.c-bg-lower {
 background: var(--lower-color);
}

.c-bg-image {
 background: url(../img/bg-image.png) center center / cover;
}

.c-width-1400 {
 max-width: 1400px;
 width: 100%;
 margin: 0 auto;
}

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

.c-width-980 {
 max-width: 980px;
 width: 100%;
 margin: 0 auto;
}

.c-inner {
 padding: 0 20px;
}


.c-title {
 text-align: center;
 font-weight: bold;
}

.c-title__main-text {
 position: relative;
 font-size: 36px;
}

@media screen and (max-width: 768px) {
 .c-title__main-text {
  font-size: 31px;
 }
}

.c-title__main-text::after {
 position: absolute;
 content: "";
 height: 4px;
 width: 25px;
 bottom: -10px;
 left: calc(50% - 12.5px);
 transform: translate(0, -50%);
 background: #000;
}

@media screen and (max-width: 768px) {
 .c-title__main-text::after {
  bottom: -14px;
 }
}

.c-title__sub-text {
 padding-top: 30px;
 font-size: 18px;
}

@media screen and (max-width: 768px) {
 .c-title__sub-text {
  padding-top: 30px;
  font-size: 18px;
 }
}

.p-about {
 padding: 80px 0;
}

@media screen and (max-width: 768px) {
 .p-about {
  padding: 60px 0;
 }
}

.p-about__wrap {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 60px;
 padding-top: 80px;
}

@media screen and (max-width: 768px) {
 .p-about__wrap {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 60px;
  padding-top: 80px;
 }
}

.p-about__item-image {
 position: relative;
 padding-right: 20px;
 padding-bottom: 20px;
}

.p-about__item-image::after {
 position: absolute;
 width: calc(100% - 20px);
 height: calc(100% - 20px);
 bottom: 0;
 right: 0px;
 content: "";
 background: var(--main-color);
 border-radius: 35px 0 0 0;
 z-index: -1;
}

.p-about__item-image img {
 border-radius: 35px 0 0 0;
}

.p-about__item-title {
 font-size: 24px;
 font-weight: bold;
 text-align: center;
 padding-top: 30px;
}

@media screen and (max-width: 768px) {
 .p-about__item-title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding-top: 20px;
 }
}

.p-about__item-text {
 padding-top: 20px;
}

@media screen and (max-width: 768px) {
 .p-about__item-text {
  padding-top: 10px;
 }
}


.p-staff {
 padding: 80px 0;
}

@media screen and (max-width: 768px) {
 .p-staff {
  padding: 60px 0;
 }
}

.p-staff__wrap {
 display: grid;
 max-width: 768px;
 margin: 0 auto;
 grid-template-columns: repeat(2, 1fr);
 justify-content: center;
 gap: 40px;
 padding-top: 40px;
}

.p-staff__wrap.item-1 {
 grid-template-columns: 1fr;
 text-align: center;
 max-width: 740px;

}

@media screen and (max-width: 768px) {
 .p-staff__wrap.item-1 {
  text-align: left;
 }
}

@media screen and (max-width: 768px) {
 .p-staff__wrap {
  display: grid;
  grid-template-columns: repeat(1, auto);
  gap: 60px;
  padding-top: 20px;
 }
}

.p-staff__item-image {
 margin: 0 auto;
 width: 285px;
 height: auto;
}

.p-staff__wrap.item-1 .p-staff__item-image {
 margin: 0 auto;
 width: 100%;
 max-width: 448px;
 height: auto;
}

.p-staff__item-title {
 font-size: 24px;
 font-weight: bold;
}

@media screen and (max-width: 768px) {
 .p-staff__item-title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
 }
}

.p-staff__item-text {
 padding-top: 20px;
 font-size: 16px;
}

@media screen and (max-width: 768px) {
 .p-staff__item-text {
  padding-top: 10px;
 }
}

.p-menu {
 padding: 80px 0 120px;
}

@media screen and (max-width: 768px) {
 .p-menu {
  padding: 60px 0 80px;
  overflow: hidden;
 }
}

.p-menu__category {
 padding-top: 40px;
}

@media screen and (max-width: 768px) {
 .p-menu__category {
  padding-top: 40px;
 }
}

.p-menu__category .p-menu__wrap:not(:first-child) {
 padding-top: 60px;
}

@media screen and (max-width: 768px) {
 .p-menu__category .p-menu__wrap:not(:first-child) {
  padding-top: 40px;
 }
}

.p-menu__category-en {
 font-weight: bold;
 font-size: 98px;
 color: var(--sub-color);
}

@media screen and (max-width: 768px) {
 .p-menu__category-en {
  font-size: 98px;
  margin-left: -20px;
 }
}

.p-menu__category-jp {
 font-weight: bold;
 font-size: 28px;
 position: relative;
 padding-bottom: 15px;
 border-bottom: 2px solid #DEDDDD;
}

@media screen and (max-width: 768px) {
 .p-menu__category-jp {
  font-size: 24px;
 }
}

.p-menu__category-jp::after {
 position: absolute;
 background: #5F5E5E;
 height: 2px;
 width: 370px;
 content: "";
 left: 0;
 bottom: 0;
}

@media screen and (max-width: 768px) {
 .p-menu__category-jp::after {
  width: 120px;
 }
}

.p-menu__itembox {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 60px;
 padding-top: 40px;
}

@media screen and (max-width: 768px) {
 .p-menu__itembox {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 60px;
  padding-top: 40px;
 }
}

.p-menu__item {
 position: relative;
}

@media screen and (min-width: 769px) {
 .p-menu__item::after {
  position: absolute;
  right: -30px;
  top: 0;
  width: 2px;
  height: 100%;
  content: "";
  border-right: dotted 2px var(--sub-color);
 }

 .p-menu__itembox .p-menu__item:nth-child(3)::after {
  border-right: none;
 }

 .p-menu__itembox .p-menu__item:nth-child(6)::after {
  border-right: none;
 }

 .p-menu__itembox .p-menu__item:nth-child(9)::after {
  border-right: none;
 }
}

@media screen and (max-width: 768px) {
 .p-menu__itembox .p-menu__item:not(:last-child) {
  padding-bottom: 40px;
  border-bottom: 2px dotted var(--sub-color);
 }
}

.p-menu__item-image {
 position: relative;
}

.p-menu__item-title {
 font-size: 21px;
 font-weight: bold;
 padding-top: 20px;
}

@media screen and (max-width: 768px) {
 .p-menu__item-title {
  font-size: 18px;
  font-weight: bold;
  padding-top: 20px;
 }
}

.p-menu__item-text {
 padding-top: 10px;
}

ul li {
 text-indent: -1rem;
 margin-left: 1rem;
}

@media screen and (max-width: 768px) {
 .p-menu__item-text {
  padding-top: 10px;
 }
}

.p-menu__item-price {
 font-size: 20px;
 padding-top: 10px;
}

@media screen and (max-width: 768px) {
 .p-menu__item-price {
  font-size: 18px;
 }
}

.p-menu__price {
 font-weight: bold;
 color: var(--sub02-color);
 font-size: 26px;
}

.price-strong {
 font-size: 40px;
}

.price-sub {
 font-size: 20px;
 color: #000;
}

.p-biginner {
 padding: 120px 0;
}

@media screen and (max-width: 768px) {
 .p-biginner {
  padding: 80px 0;
 }
}

.p-biginner__wrap {
 display: grid;
 gap: 60px;
 padding-top: 80px;
}

@media screen and (max-width: 768px) {
 .p-biginner__wrap {
  display: grid;
  gap: 40px;
  padding-top: 60px;
 }
}

.p-biginner__item {
 border-radius: 25px 0 0 0;
 background: var(--lower-color);
 padding: 20px 60px;
 display: grid;
 grid-template:
  "number title txt"
  /auto minmax(180px, 0.35fr) 1fr
 ;
 gap: 30px;
 align-items: center;
}

@media screen and (max-width: 768px) {
 .p-biginner__item {
  padding: 30px 30px;
  display: grid;
  grid-template:
   "number ... title"
   "txt txt txt"
   /auto 20px 1fr
  ;
  gap: 0px;
 }
}

.p-biginner__number {
 grid-area: number;
 font-size: 40px;
 font-weight: bold;
 color: var(--sub02-color);
 text-align: center;
}

.p-biginner__item-title {
 grid-area: title;
 font-size: 18px;
 font-weight: bold;
}

.p-biginner__item-text {
 grid-area: txt;
}

.p-access {
 padding: 120px 0;
}

@media screen and (max-width: 768px) {
 .p-access {
  padding: 80px 0;
 }
}

.p-access__wrap {
 padding-top: 60px;
 text-align: center;
}

@media screen and (max-width: 768px) {
 .p-access__wrap {
  padding-top: 40px;
 }
}

.p-access__wrap iframe {
 max-width: 760px;
 height: 460px;
}

@media screen and (max-width: 768px) {
 .p-access__wrap iframe {
  height: 280px;
 }
}

.p-contact {
 padding: 80px 0;
}

@media screen and (max-width: 768px) {
 .p-contact {
  padding: 60px 0;
 }
}

.p-contact__wrap {
 padding-top: 60px;
 text-align: center;
}

@media screen and (max-width: 768px) {
 .p-contact__wrap {
  padding-top: 40px;
 }
}

.c-tel-button a {
 background: #C6883F;
 color: #fff;
 font-size: 45px;
 font-weight: bold;
 position: relative;
 display: flex;
 justify-content: center;
 border-radius: 40px;
 height: 86px;
 align-items: center;
 width: 535px;
 margin: 0 auto;
 text-align: center;
}

@media screen and (max-width: 768px) {
 .c-tel-button a {
  font-size: 28px;
  height: 56px;
  width: 100%;
 }
}

.c-tel-button a img {
 margin-bottom: -5px;
 width: 26px;
 height: auto;
 margin-right: 20px;
}

@media screen and (max-width: 768px) {
 .c-tel-button a img {
  margin-bottom: -5px;
  width: 18px;
  height: auto;
 }
}

@media screen and (max-width: 768px) {
 .p-contact__wrap iframe {
  height: 280px;
 }
}

.l-footer {
 padding: 40px 0 0px;
}

.l-footer__inner {
 padding: 0 0 120px;
}

@media screen and (max-width: 768px) {
 .l-footer__inner {
  padding: 0 0 80px;
 }
}

.l-footer__logo {
 width: 70px;
 margin: 0 auto;
}

.l-footer__infomation {
 text-align: center;
 padding-top: 40px;
 display: grid;
 gap: 10px;
}

.l-footer__infomation dl dt {
 font-weight: bold;
}

.l-footer__copyright {
 padding: 30px 0;
 font-size: 14px;
 background: #000;
 color: #fff;
 text-align: center;
}

@media screen and (max-width: 768px) {
 .l-footer__copyright {
  font-size: 12px;
 }
}

@media screen and (min-width: 769px) {
 .c-sp {
  display: none;
 }

 .pc_none {
  display: none;
 }


 a {
  text-decoration: none;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
 }

 a:hover {
  opacity: 0.7;
 }

 /* #page-top {
		bottom: 100px;
		right: 10px;
		font-size: 48px;
		line-height: 1;
		position: fixed;
		z-index: 9999;
	} */
}

@media screen and (max-width: 768px) {
 .sp_none {
  display: none;
 }

 .c-pc {
  display: none;
 }


 a {
  text-decoration: none;
 }

 /* #page-top {
		display: block;
		font-size: 40px;
		line-height: 1;
		position: fixed;
		bottom: 75px;
		right: 5px;
		z-index: 1;
	} */
 .drawer-hamburger {
  position: fixed;
  top: 20px;
  transform: translate3d(-10px, 0px, 0px);
 }

 .drawer-hamburger-icon {
  top: 10px;
  right: -3px;
 }

 .drawer-hamburger-icon,
 .drawer-hamburger-icon:before,
 .drawer-hamburger-icon:after {
  background-color: #000;
  width: 25px;
 }

 .drawer-nav {
  background: rgba(255, 255, 255, 0.7);
  width: auto;
  height: auto;
 }

 .drawer-open .drawer-overlay {
  /* display: none; */
 }

 .drawer-hamburger {
  z-index: 9999 !important;
 }

 .drawer--right.drawer-open .drawer-hamburger {
  right: 0px;
 }

 .drawer-hamburger-icon:before,
 .drawer-hamburger-icon:after {
  position: absolute;
  top: -15px;
  left: 0;
  content: ' ';
 }

 .drawer-open .drawer-hamburger-icon:before,
 .drawer-open .drawer-hamburger-icon:after {
  top: -5px;
 }

 .drawer-menu {
  padding: 100px 15px 40px;
  display: grid;
  gap: 20px;
 }

 .drawer-item {
  text-align: center;
 }

 .drawer-item span {
  font-size: 12px;

 }


}

.c-sns {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 5px 0 0;
}

.c-sns a:not(:first-child) {
 padding-left: 15px;
}

.c-sns img {
 width: 40px;
 height: auto;
}