@charset "utf-8";

/* Reset */
*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}

li {list-style-type: none;}
dl,dt,dd,p,table,th,td,form,label,ul,li {margin:0; padding:0;}
img {border: 0; line-height: 0; vertical-align: bottom;}
body {width:100%;height: 100%;}
html {scroll-behavior: smooth;}

/* color */
:root{
  --theme-main: #000;
  --theme-sub1: #8B1E25;
  --theme-sub2: #ddd;

  --main-bg: #fff;/* 全体背景色 */
  --main-txt: #000;/* 全体文字色 */

  --nav-txt: #000;/* ヘッダのmenu */
  --nav-sp-btn: #ddd;/* スマホmenu3本線 */
  --nav-sp-bg: #8B1E25;/* スマホmenuの中の背景 */
  --nav-sp-txt: #fff;/* スマホmenuの中の文字 */

  --mv-txt: #fff;/* topスライダ内の文字 */
  --mv-txt-shadow: #8B1E25;/* topスライダ内の文字影 */
  --mv-page: #ddd;/* スライダのページバーオフ */
  --mv-page-active: #8B1E25;/* スライダのページバーオン */

  --h2-txt: #000;/* -INFORMATION-などの見出し */
  --color-btn-bg: #000;/* リンクボタンの背景 */
  --color-btn-txt: #fff;/* リンクボタンの文字 */
  --s-btn-bg: #fff;/* MENU下層LUNCHなどのボタンの背景 */
  --s-btn-txt: #000;/* MENU下層LUNCHなどのボタンの文字 */

  --font12: .75rem; /* font-size:12px〜48px */
  --font13: .8125rem;
  --font14: .875rem;
  --font15: .9375rem;
  --font16: 1rem;
  --font18: 1.125rem;
  --font20: 1.25rem;
  --font24: 1.5rem;
  --font28: 1.75rem;
  --font32: 2rem;
  --font48: 3rem;

  --easing: cubic-bezier(.2, 1, .2, 1);
  --transition: .8s var(--easing);
}

/*link*/
a,a:link,a:visited,a:active,a:hover { text-decoration: none; }
a {color: var(--main-txt);}
/* a:hover {opacity:0.6;transition: all ease .5s;} */
a:focus {outline:none;cursor:pointer;}
*:focus {outline: none;}

/*font-family*/
body {font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;color: var(--main-txt);}
.menu a,section h2,.followus,ul.nav-menu li,#menu .box .menuTxt h3,#copy,.copper {font-family: "CopperplateGothicLTPro-31AB",copperplate;}
.mv01 .slide-title h2,.mv01 .slide-title p{font-family: "FP-ヒラギノUD角ゴ StdN W3";}
.info-att,#info dd,#concept h3,#concept p,ul.nav-menu li span,#menu .box .menuTxt p,#menu .box .menuPriceWrap p,#menu .box .menuPriceWrap div,.txtbox_recruit p,.txtbox_interior p,.txtbox_marugos p,.r-btn a,.menu li span,.txtbox_interior h3{font-family: "FP-ヒラギノUD角ゴ StdN W4";}
#info h3,#menu .box .menuPriceWrap h3,#menu .box .menuPriceWrap h4,#menu .box .menuTxt h4,#menu .box .menuTxt h3 span{font-family: "FP-ヒラギノUD角ゴ StdN W6";}
#menu .box .menuPriceWrap h4.copper {font-family: "CopperplateGothicLTPro-31AB",copperplate;}

/*font-size*/
body {font-size: var(--font16);line-height: 2.1;}
@media (max-width: 767px){
  body{font-size: var(--font14);line-height: 1.8;}
}

/* btn */
.r-btn a{
  display: block;
  width: 100%;
  max-width: 440px;
  text-align: center;
  height: 50px;
  margin: 2rem auto;
  padding: 10px 0 0;
  font-size: var(--font16);
  position: relative;
  background: var(--color-btn-bg);
  color: var(--color-btn-txt);
}
.r-btn a i{
  padding: 0 8px;
}
.r-btn a:hover{
background: var(--color-btn-txt);
color: var(--color-btn-bg);
border: solid 1px var(--color-btn-bg);
}

/*responsive*/
.none { display:none !important; }
.pc{display: block;}
.sp{display: none;}
@media (max-width: 576px){
  .pc{display: none;}
  .sp{display: block;}
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

/*-----------------------------------------------
header
-----------------------------------------------*/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;
  height: 50px;
  scrollbar-width: none; /*Firefox対応*/  
  -ms-overflow-style: none/*IExplore対応*/  
}
header::-webkit-scrollbar {  
  display: none; /*Chrome、Safari、Edge対応*/
}

/* logo */
header h1 {
  position: absolute;
}
header h1 a img {
  display: block;
  width: 150px;
  height: 150px;
  background: rgb(255 255 255 / 50%);
  border-radius: 50%;
  padding: 10px;
  margin: 6%;
}
@media (min-width: 1025px) {
  header h1 a img {
    width: 250px;
    height: 250px;
    padding: 20px;
  }
}

/* menu */
.menu {
  list-style: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  margin-top: 0px;
  padding: 50px 0 10px 0px;
  clear: both;
  background: var(--nav-sp-bg);
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
  transform: scale(1, 0);
  transform-origin: top;
  overflow-y: scroll;
}
.menu-btn:checked ~ .menu {
  transform: scale(1, 1);
  transform-origin: top;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
.menu a {
  text-decoration: none;
  font-weight: 500;
  /* letter-spacing: 2px; */
  font-size: var(--font20);
  color: var(--nav-sp-txt);
  font-weight: bold;
  cursor: pointer;
  opacity: 0;
  transition: 0.5s;
}
.menu a:hover {
  opacity: 0.5;
}
.menu li {
  padding: 16px 0;
  margin: 0;
  text-align: center;
  opacity: 0;
  transition: 0.5s;
}
.menu-btn:checked ~ .menu a,
.menu-btn:checked ~ .menu li {
  opacity: 1;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s;
}
.menu-btn {
  display: none;
}
.menu-icon {
  display: flex;
  justify-content: flex-end;
  position: relative;
  cursor: pointer;
  padding: 24px 14px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  z-index: 9;
  position: absolute;
  top: 0;
  right: 0;
}
.navicon {
  background: var(--nav-sp-btn);
  display: block;
  height: 1px;
  width: 26px;
  position: relative;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
.navicon:before,
.navicon:after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  background: var(--nav-sp-btn);
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
.navicon:before {
  top: 9px;
}
.navicon:after {
  bottom: 9px;
}

/* Hamburger Menu Animation */
.menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}
.menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before {
  top: 0;
}
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  bottom: 0;
}
.menu-btn:checked ~ .menu-icon .navicon {
  background: rgba(0, 0, 0, 0);
  transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}


.navtext-container {
  width: 100%;
  height: 52px;
  position: absolute;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.menu li span{
  display: block;
  font-size: var(--font12);
  padding: 0.1rem 0 0;
  color: var(--nav-sp-txt);
  opacity: 0.5;
}
@media (min-width: 1025px){
.menu {
  position: relative;
  top: 0px;
  margin-top: 0px;
  padding: 0 0 0px 0;
  background: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  transform: scale(1, 1);
  transform-origin: top;
  overflow-y: hidden;
}
.menu li {
  margin: 0 14px;
  padding: 18px 0;
  opacity: 1;
}
.menu li span{
  display: none;
}
.navicon {
  display: none;
}
.menu a {
  font-size: var(--font15);
  opacity: 1;
  color:#fff;
}
.menu a.active,.menu a:hover {
  color: var(--main-txt);
}
.menu li:last-child {
  margin: 0 24px 0 14px;
}

}

#header {
  transition: all 0.5s ease;
}
/* #header.fixed-header h1 a img {371/yotsuyaのサイズ
  width: 92px;
  height: 92px;
} */
#header.fixed-header h1 a img {
  width: 120px;
  height: 120px;
}
@media (min-width: 1025px) {
  #header.fixed-header .menu a {
    color: var(--theme-main);
  }
  header.fixed-header h1 a img {
    padding: 10px;
  }
}

/*-----------------------------------------------
top1.bg-fade
-----------------------------------------------*/
.mv01 {
  margin: 0;
  background: #000;
}
.mv01 .l-inner {
  padding-bottom: 0;
}
.mv01 .swiper-fade .swiper-slide {
  -webkit-transition-property: opacity, -webkit-transform !important;
  transition-property: opacity, -webkit-transform !important;
  transition-property: opacity, transform !important;
  transition-property: opacity, transform, -webkit-transform !important;
  /* pointer-events: none; */
}
/* .mv01 .swiper-fade .swiper-slide-active {
  pointer-events: auto;
} */
.mv01 .swiper-pagination {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 3.2rem;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  margin: auto;
}
.mv01 .swiper-pagination-bullet {
  display: block;
  width: 3px;
  height: 4rem;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background-color: rgba(255, 255, 255, 0.4);
}
.mv01 .swiper-pagination-bullet:not(:first-child) {
  margin-top: 0.8rem;
}
.mv01 .swiper-pagination-bullet-active {
  background-color: var(--mv-page-active);
}
.mv01 .slide-media {
  height: 80vh;
  filter: brightness(0.8);
}
.mv01 .slide-media img {
  -webkit-transition: 7s 1s ease-out;
  transition: 7s 1s ease-out;
}
/* .mv01 .slide-title {
  position: absolute;
  width: 100%;
  right: 0%;
  top: 34%;
} */
/* 右寄せ */
.mv01 .slide-title {
  position: absolute;
  right: 4rem;
  top: 28%;
}
.mv01 .slide-title h2{
  font-size: 3rem;
  font-weight: normal;
  line-height: 1.2;
  /* text-align: center; */
  text-align: left;/* 右寄せ */
  color: var(--mv-txt);
  margin: 0 0 1rem;
  text-shadow: 2px 2px 10px var(--mv-txt-shadow), -2px 2px 10px var(--mv-txt-shadow), 2px -2px 10px var(--mv-txt-shadow), -2px -2px 10px var(--mv-txt-shadow);
}
.mv01 .slide-title p{
  font-size: 1.1rem;
  font-weight: normal;
  line-height: 1.5;
  /* text-align: center; */
  text-align: left;/* 右寄せ */
  color: var(--mv-txt);
  text-shadow: 2px 2px 10px var(--mv-txt-shadow), -2px 2px 10px var(--mv-txt-shadow), 2px -2px 10px var(--mv-txt-shadow), -2px -2px 10px var(--mv-txt-shadow);
}
.mv01 .slide-title p br {
  display: none;
}
.mv01 .swiper-slide[class*=-active] .slide-media img {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.mv01 .swiper-slide[class*=-active] .slide-title h2{
  -webkit-animation: mv01-fadeIn 2s 0.5s var(--easing) both;
          animation: mv01-fadeIn 2s 0.5s var(--easing) both;
}
.mv01 .swiper-slide[class*=-active] .slide-title p {
  -webkit-animation: mv01-fadeIn 2s 1.1s var(--easing) both;
          animation: mv01-fadeIn 2s 1.1s var(--easing) both;
}

@-webkit-keyframes mv01-fadeIn {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0;
    -webkit-filter: blur(300px);
            filter: blur(300px);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
}

@keyframes mv01-fadeIn {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0;
    -webkit-filter: blur(300px);
            filter: blur(300px);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
}

@media (min-width: 1025px) {
  .swiper-button-prev::before, .swiper-button-next::before {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .swiper-button-prev:hover::before, .swiper-button-next:hover::before {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@media (max-width: 1025px) {
  html {
    -webkit-text-size-adjust: 100%;
  }
  .l-inner {
    padding: 0 4rem;
  }
  .mv01 .slide-media {
    height: max(75vh, 75vw);
  }
  .card03 {
    margin: -260px 0 50px;
  }
  .mv01 .slide-title {
    position: absolute;
    right: 5%;
    top: 36%;
    margin-left: auto;
    width: 90%;
}
  .mv01 .slide-title h2 {
    font-size: 2.5rem;
    text-align: center;
  }
  .mv01 .slide-title p {
    font-size: 1.0rem;
    text-align: center;
  }
  .mv01 .slide-title p br {
    display: block;
}
}
@media (max-width: 599px) {
  .mv01 .slide-title {
    bottom: 30%;
  }
  .mv01 .slide-title h2 {
    /* font-size: 1.6rem; */
    font-size: 1.3rem;
    text-align: center;
  }
  .mv01 .slide-title p {
    /* font-size: 0.9rem; */
    font-size: 0.8rem;
    text-align: center;
  }
}



/*-----------------------------------------------
top2.bn-slider
-----------------------------------------------*/
.l-inner {
  position: relative;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 10rem;
}
[class*=swiper]:focus {
  outline: none;
}
.slide-media,
.thumb-media {
  position: relative;
  overflow: hidden;
}
.slide-media img,
.thumb-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
      object-fit: cover;
}

.swiper-button-prev, .swiper-button-next {
  display: grid;
  place-content: center;
  width: 2.4rem;
  height: 2.4rem;
  cursor: pointer;
}
.swiper-button-prev::before, .swiper-button-next::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  border:solid 1px #ccc;
}
.swiper-button-prev::after, .swiper-button-next::after {
  width: 0.8rem;
  height: 0.8rem;
  content: "";
  border:solid 1px #ccc;
  border-width: 3px 3px 0 0;
}
.swiper-button-prev::after {
  margin-left: 0.4rem;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.swiper-button-next::after {
  margin-right: 0.4rem;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.swiper-button-disabled {
  pointer-events: none;
  opacity: 0;
}

.card03 {
  overflow: hidden;
  margin: -50px 0 0px;
  padding: 0 0 50px;
  background: var(--main-bg);
}
.card03 .swiper {
  overflow: visible;
}
.card03 .swiper-button-prev, .card03 .swiper-button-next {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  margin: auto;
}
.card03 .swiper-button-prev::before, .card03 .swiper-button-next::before {
  background-color: rgb(255 255 255 / 0%);
}
.card03 .swiper-button-prev:hover::before, .card03 .swiper-button-next:hover::before {
  background-color: rgb(255 255 255 / 80%);
}
.card03 .swiper-button-prev::after, .card03 .swiper-button-next::after {
  border-color: #ccc;
}
.card03 .swiper-button-prev:hover::after, .card03 .swiper-button-next:hover::after {
  border-color: #aaa;
}
.card03 .swiper-button-prev {
  right: calc(100% - 1.6rem);
}
.card03 .swiper-button-next {
  left: calc(100% - 1.6rem);
}
.card03 .slide {
  overflow: hidden;
  -webkit-transition: var(--transition), opacity 1s;
  transition: var(--transition), opacity 1s;
  border-radius: 0px;
}
.card03 .slide-media {
  padding-top: 55.55%;
  border-radius: 4px;
}
.card03 .swiper-slide:not(.swiper-slide-visible) .slide {
  pointer-events: none;
  filter: brightness(0.5);
}
.card03 .swiper-wrapper {
  align-items: flex-end;
}

.card03 .swiper-pagination {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 1.2rem 0.8rem;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 1.2rem;
  text-align: center;
}
.card03 .swiper-pagination-bullet {
  width: 1.6rem;
  height: 3px;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  vertical-align: top;
  background-color: var(--mv-page);
}
.card03 .swiper-pagination-bullet-active {
  width: 4rem;
  background-color: var(--mv-page-active);
}

@media (min-width: 1025px) {
  .swiper-button-prev::before, .swiper-button-next::before {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .card03 .slide img {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .card03 .slide:hover {
    filter: brightness(1.2);
  }
}

@media (max-width: 1025px) {
  html {
    -webkit-text-size-adjust: 100%;
  }
  .l-inner {
    padding: 0rem;
  }
  .card03 .swiper {
    padding: 0rem;
  }
  .card03 .swiper-button-prev {
    right: calc(100% - 2.2rem);
  }
  .card03 .swiper-button-next {
    left: calc(100% - 2.2rem);
  }
  .card03 {
    margin: -130px 0 0px;
}
}
@media (max-width: 599px) {
  .card03 {
    margin: -30px 0 0px;
}
}

/*-----------------------------------------------
1.info
-----------------------------------------------*/
section h2{
  font-size: var(--font32);
  margin: 0 auto 1rem;
  color: var(--h2-txt);
}
@media (min-width: 1025px) {
  section h2{
    font-size: var(--font48);
  }
}

#info{
  text-align: center;
  padding: 5rem 0 5rem;
  background: var(--main-bg);
}
.infowrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#info div.info-left {
  padding: 0 8%;
  width: 100%;
}
#info div.info-right {
  padding: 2rem 4% 0;
  max-width: 540px;
}
/* #info div.info-right { facebookの時
  padding: 0 5%;
} */
#info h3 {
  text-align: left;
  font-size: var(--font18);
  line-height: 1.8rem;
  margin: 2rem auto 1rem;
  width: 100%;
}
.info-att {
  width: 80%;
  margin: 0 auto 1rem;
  text-align: left;
  text-indent: -1em;
}
.info-att span {
  border-bottom: solid 1px #c00;
}
#info dl {
  margin: 0 auto;
  width: 90%;
}
#info dt {
  float: left;
  clear: left ;
  width: 10%;
  max-width: 35px;
  text-align: left;
}
#info dd {
  float: left;
  width: 90%;
  padding: 0 0 0.5rem;
  text-align: left;
}
#info dd a.uline{
  border-bottom: solid 2px var(--main-txt);
  line-height: 1.6rem;
  margin-bottom: 5px;
  display: inline-block;
}
#info dd a.uline-att{
  border-bottom: solid 2px var(--theme-sub1);
  line-height: 1.6rem;
  color: var(--theme-sub1);
  margin-bottom: 5px;
  display: inline-block;
}
#info dd a:hover{
  opacity: 0.5;
}

#info dd dl.time-l {
  margin: 0.5rem 0;
  clear: left;
}
#info dd dl.time-l dt,#info dd dl.time-l dd{
  float:left;
  white-space: nowrap;
}
#info dd dl.time-l dt {
  white-space: nowrap;
  font-size: var(--font15);
  line-height: 1.5rem;
  text-align: left;
  max-width: 100px;
  width: 40%;
}
#info dd dl.time-l dd {
  width: 50%;
  font-size: var(--font24);
  line-height: 1.3rem;
}

#info dd dl.time-s {
  margin: 0.5rem 0 0 1rem;
  clear: left;
  display: inline-block;
}
#info dd dl.time-s dt,#info dd dl.time-s dd{
  float:left;
  white-space: nowrap;
}
#info dd dl.time-s dt {
  width: 50%;
  max-width: 100px;
  font-size: var(--font13);
  line-height: 0.8rem;
  text-align: left;
}
#info dd dl.time-s dd {
  width: 50%;
  font-size: var(--font13);
  line-height: 0.8rem;
}

#info dd span {
  font-size: var(--font13);
}
#info p {
  clear: left;
  text-align: left;
  margin: 1rem auto 0;
  width: 90%;
}

/* 平日17:00-25:00（漢字+数字）みたいな時 */
.info-fs24{
  font-size: var(--font24)!important;
  line-height: 1.8;
}
.info-fs14 {
  font-size: var(--font14) !important;
  display: inline-block;
  vertical-align: middle;
  min-width: 60px;
  padding-right: 5px;
}
/* L.O.で2行になる時 */
.info-fs14-lo {
    font-size: var(--font14) !important;
    display: block;
    margin: -0.5rem 0 0;
    width: 14rem;
    text-align: right;
}

.followus {
  font-size: var(--font20);
  line-height: 1.2rem;
  margin: 2rem 0 0;
  display: inline-block;
}
.sns-btn {
  display: flex;
  justify-content: center;
}
.sns-btn a{
  font-size: var(--font48);
  margin: -15px 5px 0;
  color: var(--main-txt);
}
.sns-btn a:hover{
  opacity: 0.5;
}
#fb {
  width: 300px;
  display: block;
  margin: 0 auto 50px;
}

/*---gmap---*/
#gmap {
  margin: 0 0 0px 0;
  height: 440px;
  width: 100%;
}
@media (max-width:800px) {
#gmap{
	display:none;
}
}

@media (min-width: 1025px) {
  #info{
    padding: 5rem 0;
  }
  .infowrap {
    display: flex;
    justify-content: center;
    margin: 3rem auto;
    max-width: 1000px;
  }
  .infowrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
  #info div.info-left {
    width: 50%;
    text-align: left;
    padding: 0 5%;
  }
  #info div.info-right {
    width: 50%;
    text-align: left;
    padding: 0 0%;
  }
  #info dl {
    margin: 0;
    width: 100%;
  }
  #info h3 {
    margin: 0 auto 1rem;
    width: 100%;
  }
  #info p {
    width: 100%;
  }
  .sns-btn {
    display: flex;
    justify-content: flex-start;
  }
}
@media (min-width: 599px) {
  .info-att {
    text-align: center;
  }
  a[href^="tel:"] {
    pointer-events: none;
  }
  #info div.info-left {
    padding: 0 5%;
    width: 598px;
    margin: 0 auto;
}
}

/*-----------------------------------------------
2.concept
-----------------------------------------------*/
#concept{
  text-align: center;
  padding: 0;
}
#concept h2 {
  margin: 1rem auto 0;
}
#concept h3 {
  font-size: var(--font20);
  /* font-size: var(--font28); 1行のとき文字大きめ*/
  margin: 0 auto;
  padding: 5rem 4% 3rem;
  text-align: center;
  line-height: 2.2rem;
}

/*固定する背景*/
.parallax-bg{
  color: #FFF;
  padding: 0;
}
.parallax-bg::before {
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background-repeat:no-repeat;
  background-position:50% 100%;
  background-image: url('../img/bg_concept.webp');
  background-size:cover;
}
@media (max-width: 767px) {
  .parallax-bg::before {
    background-image: url('../img/bg_concept-sp.webp');
  }
  #concept p br {
    display: none;
  }
}
.parallax-bg p {
  padding: 0 7% 2rem;
  font-size: var(--font15);
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.7rem;
  text-align: left;
}
.scrollbox1 {
  background: var(--main-bg);
  height: 50px;
  margin: -5rem 0 0;
  padding: 4rem 0;
}
.overlay {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: rgba(0,0,0,0.5);
}
.parallax-bg p:last-child {
  padding: 0 7% 6rem;
}



@media (min-width: 599px) {
  #concept h2 {
    margin: 0rem auto 0;
}
  #concept h3 {
    font-size: var(--font32);
    margin: 0 auto;
    padding: 11rem 4% 3rem;
    line-height: 1.5;
  }
  /* #concept h3 br{
    display: none;
  } */
  .parallax-bg p {
    padding: 0 4% 2rem;
    font-size: 1rem;
    max-width: 660px;
    margin: 0 auto;
    line-height: 1.7rem;
    text-align: left;
  }
  .parallax-bg p:last-child {
    padding: 0 4% 10rem;
  }
}
@media (min-width: 1024px) {
  .parallax-bg p {
    max-width: 900px;
    /* max-width: 600px; */
  }
  .scrollbox1 {
    height: 10rem;
    margin: 0rem 0 0;
    padding: 10rem 0 5rem;
  }
}

/*-----------------------------------------------
3.menu
-----------------------------------------------*/
#menu {
  text-align: center;
  background: var(--main-bg);
  padding: 5rem 0;
}
ul.nav-menu {
  padding: 0;
  margin: 0 auto;
  width: 95%;
  max-width: 500px;
  position: relative;
}
/* menuが2個の時 */
/* ul.nav-menu {
  display: flex;
  justify-content: center;
} */
ul.nav-menu li {
  list-style: none;
  /* border: solid 1px var(--s-btn-txt); */
  margin: 1%;
  width: 31%;
  float: left;
  /* font-size: var(--font18); */
  font-size: var(--font16);
  line-height: 1.3rem;
  background: #eee;
  color: var(--s-btn-txt);
}
ul.nav-menu li:hover {
  background: var(--s-btn-txt);
  color: var(--s-btn-bg);
}
ul.nav-menu a {
  display: block;
  padding: 20px 0 10px;
}
ul.nav-menu li span {
  font-size: 0.6rem;
  display: block;
}

#menu .box {
  margin: 2rem 1rem;
}
#menu .box .menuImg-menuPrice-Wrap {
  width: 100%;
  /* max-width: 2000px; */
  display: flex;
  flex-direction: column;
}
#menu .box img {
  margin: 0 auto;
  width: 100%;
  max-width: 500px;
}
#menu .box .menuTxt {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
#menu .box .menuTxt h3 {
  font-size: var(--font32);
  line-height: 2rem;
  margin: 3rem 0 2rem;
}
#menu .box .menuTxt h3 span{
font-size: var(--font14);
display: block;
}
#menu .box .menuTxt p{
text-align: left;
margin: 1rem 0;
}
#menu .box .menuPriceWrap div.att{
font-size: var(--font12);
line-height: 1.4rem;
text-align: left;
margin: 0 1rem;
}
#menu .box .menuPriceWrap div.att a { 
  text-decoration: none;
  border-bottom:solid 1px #000;
  padding-bottom: 0.1rem;
}

#menu .box .menuPrice {
  margin: 1rem 1rem 2rem;
}
#menu .box .menuPrice div {
  line-height: 1.3rem;
  font-size: var(--font13);
  margin: 0rem auto;
  border-bottom: dashed 1px var(--main-txt);
  padding: 1rem 0 0.2rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
/* 6:4の時 */
#menu .box .menuPrice dt {
  padding: 0rem 0 0.2rem;
  width: 60%;
  text-align: left;
}
#menu .box .menuPrice dd {
  width: 40%;
  text-align: right;
}
/* 10:0の時 */
#menu .box .menuPrice-w10 dt {
  width: 100%;
}
#menu .box .menuPrice-w10 dd {
  width: 0%;
}

#menu .box .menuPriceWrap h3 {
  margin: 2rem 0 1rem;
  line-height: 1.5rem;
  text-align: left;
  font-size: var(--font18);
}
#menu .box .menuPriceWrap h3 i {
  padding-right: 0.5rem;
}
#menu .box .menuPriceWrap h4 {
  margin: 2rem 0 1rem;
  line-height: 1.5rem;
  text-align: left;
  font-size: var(--font18);
}
#menu .box .menuPriceWrap h4 span {
    font-size: var(--font14);
}
#menu .box .menuPriceWrap p {
  text-align: left;
}
#menu .box .menuPrice div.more {
  font-size: var(--font13);
  line-height: 2rem;
  display: flex;
  justify-content: flex-end;
}
#menu .box .menuPriceWrap p.menuTxt-pc-r{
  margin: 0rem 0 0;
}
.menuImg-on1,.menuImg-on2,.menuImg-on3,.menuImg-on4,.menuImg-on5 {
  position: relative;
  margin: 0 auto;
  max-width: 500px;
  height: 93vw;
}
.menuImg-on1 img,.menuImg-on2 img,.menuImg-on3 img,.menuImg-on4 img,.menuImg-on5 img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 2s ease;
}
.menuImg-on1 img.active,.menuImg-on2 img.active,.menuImg-on3 img.active,.menuImg-on4 img.active,.menuImg-on5 img.active {
  opacity: 1;
}

@media (min-width: 599px) {
  #menu {
    padding: 10rem 0 5rem;
  }
  ul.nav-menu {
    max-width: 900px;
    display: flex;
    justify-content: center;
  }
  ul.nav-menu li {
    width: 18%;
    /* font-size: var(--font24); */
    font-size: var(--font20);
    line-height: 1.5rem;
  }
  .menuImg-on1,.menuImg-on2,.menuImg-on3,.menuImg-on4,.menuImg-on5 {
    height: 500px;
  }

}

@media (min-width: 768px){
#menu .box {
  margin: 2rem 18% 8rem;
}
}

@media (min-width: 1280px) {

#menu .box {
  display: flex;
  align-items: flex-start;
  margin: 2rem 0 5rem;
}
#menu .box .menuImg-menuPrice-Wrap {
  display: flex;
  flex-direction: row;
}
/* 右寄せ(menuImgWrap/menuPriceWrap) */
#menu .box .wrap-reverse {
  flex-direction: row-reverse;
}
/* 中央寄せ(menuImgWrap/menuPriceWrap) */
#menu .box .wrap-column {
  flex-direction: column;
  align-items: center;
}

#menu .box .menuImgWrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 4rem 0;
  width: 40%;
  overflow: hidden;
}
/* 右寄せ(menuImg/menuTxt) */
#menu .box .wrap-end {
  align-items: flex-end;
}
/* 中央寄せ(menuImg/menuTxt) */
#menu .box .wrap-center {
  align-items: center;
  width: 44%;
}

#menu .box .menuImgWrap .menuImg {
  margin: 0;
  width: 800px;
  max-width: 800px;
  height: 730px;
  z-index: 0;
}
#menu .box .menuImgWrap .menuImg img {
    max-width: 800px;
    width: 100%;
}

#menu .box .menuImgWrap .menuTxt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70%;
    max-width: 500px;
    z-index: 1;
    padding: 4rem 2rem 3rem;
    background: #f5f5f5;
    }
#menu .box .menuImgWrap .menuTxt h3 {
  /* font-size: var(--font48); */
  font-size: var(--font32);
  margin: 0;
  line-height: 2.2rem;
}
#menu .box .menuImgWrap .menuTxt h4 {
  font-size: var(--font20);
  margin: 2rem 0 1rem;
}
#menu .box .menuImgWrap .menuTxt p {
  font-size: 1rem;
  line-height: 2.2rem;
  padding: 0;
}

#menu .box .menuPriceWrap {
  padding: 0 10rem;
  max-width: 900px;
  margin: 0;
  width: 60%;
  z-index: 1;
  background: #fff;
}
#menu .box .just-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* 中央寄せ(menuPriceWrap) */
#menu .box .p-rl0 {
  padding: 0 2rem;
}

#menu .box .menuPrice {
  margin: 1rem 0 0rem;
}
/* h4がない時 */
#menu .box .menuPrice-mt4rem {
   margin: 4rem 0 0;
}

#menu .box .menuPrice div {
  font-size: var(--font13);
  margin: 0;
  padding: 0;
  height: 3rem; 
}
#menu .box .menuPrice dt {
  padding: 0;
}

#menu .box .menuPriceWrap div.att {
    font-size: var(--font13);
    margin: 1rem 0;
}
#menu .box .menuPriceWrap h3 {
  margin: 4rem 0 1rem;
  font-size: var(--font24);
}
#menu .box .menuPriceWrap h4 {
  font-size: var(--font24);
  margin: 4rem 0 1rem;
  text-align: left;
  line-height: 2rem;
}
/* #menu .box .menuPriceWrap h4 br {
  display: none;
} */
#menu .box .menuPriceWrap p.menuTxt-pc-r{
  /* margin: 4rem 0 0; */
  margin: 1rem 0 0;
}

}

/*-----------------------------------------------
4.interior
-----------------------------------------------*/
#interior {
  text-align: center;
  background: var(--main-bg);
  padding: 0 0 5rem;
}
.txtbox_interior {
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
  padding: 0 2rem 3rem;
}
.txtbox_interior h3{
  margin: 2rem 0 0.5rem;
}
.txtbox_interior p{
  margin: 0 0 1rem;
}
@media (min-width: 768px) {
  .txtbox_interior {
    padding: 0 18% 3rem;
  }
}
@media (min-width: 1280px) {
  .txtbox_interior {
    padding: 0 5%;
    max-width: 1200px;
  }
}

/* btm1.bn-slider*/

.card03-b1 {
  overflow: hidden;
  margin: 0px 0 0px;
  padding: 0 0 50px;
  background: var(--main-bg);
}
.card03-b1 .swiper {
  overflow: visible;
}
.card03-b1 .swiper-button-prev, .card03-b1 .swiper-button-next {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  margin: auto;
}
.card03-b1 .swiper-button-prev::before, .card03-b1 .swiper-button-next::before {
  background-color: rgb(255 255 255 / 0%);
}
.card03-b1 .swiper-button-prev:hover::before, .card03-b1 .swiper-button-next:hover::before {
  background-color: rgb(255 255 255 / 80%);
}
.card03-b1 .swiper-button-prev::after, .card03-b1 .swiper-button-next::after {
  border-color: #ccc;
}
.card03-b1 .swiper-button-prev:hover::after, .card03-b1 .swiper-button-next:hover::after {
  border-color: #aaa;
}
.card03-b1 .swiper-button-prev {
  right: calc(100% - 1.6rem);
}
.card03-b1 .swiper-button-next {
  left: calc(100% - 1.6rem);
}
.card03-b1 .slide {
  overflow: hidden;
  -webkit-transition: var(--transition), opacity 1s;
  transition: var(--transition), opacity 1s;
  border-radius: 0px;
}
.card03-b1 .slide-media {
  padding-top: 55.55%;
  /* border-radius: 4px; */
}
.card03-b1 .swiper-slide:not(.swiper-slide-visible) .slide {
  pointer-events: none;
  filter: brightness(0.5);
}
.card03-b1 .swiper-wrapper {
  align-items: flex-end;
}

.card03-b1 .slide-title {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
}
.card03-b1 .slide-title p{
  font-size: var(--font12);
  font-weight: normal;
  line-height: 1.5;
  /* text-align: center; */
  text-align: left;/* 右寄せ */
  color: var(--mv-txt);
  text-shadow: 2px 2px 10px var(--mv-txt-shadow), -2px 2px 10px var(--mv-txt-shadow), 2px -2px 10px var(--mv-txt-shadow), -2px -2px 10px var(--mv-txt-shadow);
}

.card03-b1 .swiper-pagination {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 1.2rem 0.8rem;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 1.2rem;
  text-align: center;
}
.card03-b1 .swiper-pagination-bullet {
  width: 1.6rem;
  height: 3px;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  vertical-align: top;
  background-color: var(--mv-page);
}
.card03-b1 .swiper-pagination-bullet-active {
  width: 4rem;
  background-color: var(--mv-page-active);
}

@media (min-width: 1025px) {
  .swiper-button-prev::before, .swiper-button-next::before {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .card03-b1 .slide img {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .card03-b1 .slide:hover {
    filter: brightness(1.2);
  }
}

@media (max-width: 1025px) {
  html {
    -webkit-text-size-adjust: 100%;
  }
  .l-inner {
    padding: 0rem;
  }
  .card03-b1 .swiper {
    padding: 0rem;
  }
  .card03-b1 .swiper-button-prev {
    right: calc(100% - 2.2rem);
  }
  .card03-b1 .swiper-button-next {
    left: calc(100% - 2.2rem);
  }
}
@media (max-width: 599px) {
  #interior {
    padding: 0 0 5rem;
}
}

/*-----------------------------------------------
4.1.shop
-----------------------------------------------*/
#shop {
  text-align: center;
  background: var(--main-bg);
  padding: 0 0 5rem;
}
.txtbox_shop {
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
  padding: 0 2rem 3rem;
}
.txtbox_shop p{
  margin: 0 0 1rem;
}
#shop h2 {
  font-size: 3rem;
}
@media (max-width: 1025px) {
  #shop h2 {
    font-size: 1.9rem;
  }
}
@media (min-width: 768px) {
  .txtbox_shop {
    padding: 0 18% 3rem;
  }
}
@media (min-width: 1280px) {
  .txtbox_shop {
    padding: 0 5%;
    max-width: 1200px;
  }
}

/* btm2.bn-slider*/

.card03-b2 {
  overflow: hidden;
  margin: 0px 0 0px;
  padding: 0 0 50px;
  background: var(--main-bg);
}
.card03-b2 .swiper {
  overflow: visible;
}
.card03-b2 .swiper-button-prev, .card03-b2 .swiper-button-next {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  margin: auto;
}
.card03-b2 .swiper-button-prev::before, .card03-b2 .swiper-button-next::before {
  background-color: rgb(255 255 255 / 0%);
}
.card03-b2 .swiper-button-prev:hover::before, .card03-b2 .swiper-button-next:hover::before {
  background-color: rgb(255 255 255 / 80%);
}
.card03-b2 .swiper-button-prev::after, .card03-b2 .swiper-button-next::after {
  border-color: #ccc;
}
.card03-b2 .swiper-button-prev:hover::after, .card03-b2 .swiper-button-next:hover::after {
  border-color: #aaa;
}
.card03-b2 .swiper-button-prev {
  right: calc(100% - 1.6rem);
}
.card03-b2 .swiper-button-next {
  left: calc(100% - 1.6rem);
}
.card03-b2 .slide {
  overflow: hidden;
  -webkit-transition: var(--transition), opacity 1s;
  transition: var(--transition), opacity 1s;
  border-radius: 0px;
}
.card03-b2 .slide-media {
  padding-top: 55.55%;
  /* border-radius: 4px; */
}
.card03-b2 .swiper-slide:not(.swiper-slide-visible) .slide {
  pointer-events: none;
  filter: brightness(0.5);
}
.card03-b2 .swiper-wrapper {
  align-items: flex-end;
}

.card03-b2 .swiper-pagination {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 1.2rem 0.8rem;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 1.2rem;
  text-align: center;
}
.card03-b2 .swiper-pagination-bullet {
  width: 1.6rem;
  height: 3px;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  vertical-align: top;
  background-color: var(--mv-page);
}
.card03-b2 .swiper-pagination-bullet-active {
  width: 4rem;
  background-color: var(--mv-page-active);
}

@media (min-width: 1025px) {
  .swiper-button-prev::before, .swiper-button-next::before {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .card03-b2 .slide img {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .card03-b2 .slide:hover {
    filter: brightness(1.2);
  }
}

@media (max-width: 1025px) {
  html {
    -webkit-text-size-adjust: 100%;
  }
  .l-inner {
    padding: 0rem;
  }
  .card03-b2 .swiper {
    padding: 0rem;
  }
  .card03-b2 .swiper-button-prev {
    right: calc(100% - 2.2rem);
  }
  .card03-b2 .swiper-button-next {
    left: calc(100% - 2.2rem);
  }
}
@media (max-width: 599px) {
  #shop {
    padding: 0 0 5rem;
}
}

/*-----------------------------------------------
4.1.recruit
-----------------------------------------------*/
#recruit {
  text-align: center;
  background: var(--main-bg);
  padding: 5rem 0;
}
.txtbox_recruit {
  max-width: 1200px;
  margin: 4rem auto 0;
  text-align: left;
  padding: 0 2rem 3rem;
}
.txtbox_recruit p{
  margin: 0 0 1rem;
}
.r-btn {
  max-width: 800px;
  margin: 0 auto;
}
@media (max-width: 599px) {
  #recruit {
    padding: 0 0 5rem;
}
}
@media (min-width: 768px) {
  .txtbox_recruit {
    padding: 0 18% 3rem;
  }
}
@media (min-width: 1280px) {
  .txtbox_recruit {
    padding: 0 5%;
    max-width: 960px;
  }
}

/*-----------------------------------------------
5.marugos
-----------------------------------------------*/
#marugos {
  text-align: center;
  padding: 4rem 0 0;
  width: 100%;
  background: url(../img/bg_marugos.webp) no-repeat center center;
  background-size: cover;
  background-color: rgb(0 0 0 / 20%);
  background-blend-mode: overlay;
}
#marugos h2{
  color: #fff;
}
.txtbox_marugos {
  max-width: 1200px;
  margin: 3rem auto 0;
  text-align: center;
  padding: 0 2rem 1rem;
}
.txtbox_marugos p{
  margin: 0 0 1rem;
  color: #fff;
}
.r-btn {
  max-width: 440px;
  margin: 0 auto;
}
.ms-btn a {
  background: #d18ca5;
  border: solid 1px #d18ca5;
  color: #000000;
}

@media (max-width: 599px) {
  #marugos {
    padding: 4rem 0 1rem;
}
}

/*-----------------------------------------------
footer
-----------------------------------------------*/
footer {
  background: var(--theme-sub1);
}
#copy{
  color: #fff;
  font-size: var(--font12);
  text-align: center;
  padding: 1rem 0;
}

a#top-button {
  z-index: 5;
  color: var(--color-btn-txt);
  background-color: rgb(88 88 88 / 30%);
  border-color: var(--color-btn-txt);
  opacity: 0.5;
  border-radius: 10%;
  position: fixed;
  bottom: 0;
  right: 0;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 30px;
  padding: 0px 20px 0px 20px;
}

/* スクロールでクラス付与 */
.js-scroll {
  opacity : 0;
  transition:all 2s;
}
.js-scroll.is-active {
  opacity : 1;
}
h2.js-scroll  {
  transform : translate(0, -50px);
  transition:all 1s;
}
h2.js-scroll.is-active  {
  transform : translate(0, 0);
}
img.js-scroll {
  opacity : 0;
  transition:all 1s;
  transition-delay: 0.5s;
}
img.js-scroll.is-active {
  opacity : 1;
}
.js-scroll a.btn-more {
  border-bottom: solid 1px #fff;
  transition:all 2s;
  transition-delay: 0.5s;
}
.js-scroll.is-active a.btn-more {
  border-bottom: solid 1px #000;
}

/* html調整 */
.fs12{font-size: var(--font12)!important;} 
.fs13{font-size: var(--font13)!important;}
.fs14{font-size: var(--font14)!important;}
.fs15{font-size: var(--font15)!important;}
.fs16{font-size: var(--font16)!important;}
.fs18{font-size: var(--font18)!important;}
.fs20{font-size: var(--font20)!important;}
.fs24{font-size: var(--font24)!important;}
.fs28{font-size: var(--font28)!important;}
.fs32{font-size: var(--font32)!important;}
.fs48{font-size: var(--font48)!important;}

.txt-center{text-align: center!important;}
.txt-left{text-align: left!important;}
.txt-right{text-align: right!important;}
.fl{float:left!important;}
.fr{float:right!important;}

.mt1rem{margin-top: 1rem!important;}
.mb1rem{margin-bottom: 1rem!important;}
.ml1rem{margin-left: 1rem!important;}
.mr1rem{margin-right: 1rem!important;}

.mt4rem{margin-top: 4rem!important;}