@charset "UTF-8";

/* ================================================================

  common parts

==================================================================*/
html {
  font-size               : 62.5%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust   : 100%;
  -ms-text-size-adjust    : 100%;
  text-size-adjust        : 100%;
}

body {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.2rem;
  color      : #596826;
  background : #F8F6F5;
}

a {
  display: block;
}

img {
  width    : 100%;
  max-width: 100%;
  display  : block;
}

.wrap {
  overflow: hidden;
}

.container {
  padding: 0 2%;
}


/* -- section title
---------------------------------------- */
.sec_ttl_wrap {
  text-align: center;
}

.sec_ttl {
  margin: 0 auto;
}

.sec_ttl_ja {
  font-size     : clamp(1.6rem, 1.6vw, 2.4rem);
  letter-spacing: 0.1em;
  display       : block;
  margin-top    : 6px;
}

/* -- responsive ----------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 350px) {
  html {
    font-size: 58%;
  }
}



/* ================================================================

  header

==================================================================*/
.header {
  height  : 60px;
  padding : 0 2%;
  position:relative;
  width: 100%;

}

@media screen and (min-width: 768.333px) {
  .header.fixed {
    position: fixed;
    z-index: 99;
    top: 0;
    right: 0;
    background: rgba(255,255,255,.8);
  }
}
.header_nav {
  font-size: min(1.6vw, 2.0rem);
  height   : 100%;
}

.header_nav .nav_list {
  display        : flex;
  align-items    : center;
  justify-content: flex-end;
  height         : 100%;
}

.header_nav .nav_list li {
  margin-right: 4%;
}

.header_nav .nav_list li:last-child {
  margin-right: 0;
}

/* -------------------------------------
  sp_nav
--------------------------------------- */
.sp_nav_list {
  padding        : 55px 0;
  display        : flex;
  flex-direction : column;
  justify-content: center;
  align-items    : center;
  display        : none;
}

.sp_nav_logo {
  width : clamp(300px, 85%, 500px);
  margin: 0 auto 6%;
}

.sp_nav_main {
  margin-bottom: 5.5%;
}

.sp_nav_main a {
  font-size: clamp(3.2rem, 6vw, 3.4rem);
}

.sp_nav_shop_link {
  width     : 85%;
  margin-top: 17%;
  text-align: center;
  border-top: 1px solid #fff;
}

.sp_nav_sns_link{
	display:flex;
	justify-content: center;
	align-items: center;
}
.sp_nav_sns_link li.sns_nav{
	margin:20px 8px;
}
.sp_nav_sns_link li.sns_nav .snsicon{
	width:30px;
}



.sp_nav_sub {
  padding      : 3.5% 0;
  border-bottom: 1px solid #fff;
}

.sp_nav_sub a {
  font-size: clamp(2.3rem, 5vw, 3.0rem);
  color    : #fff;
}

.header_nav .nav_list li.sns_nav{margin-right:20px;}
.snsicon{width:26px;}

/* -------------------------------------
  sp_btn
--------------------------------------- */
.sp_btn {
  width          : 40px;
  height         : 35px;
  display        : flex;
  flex-direction : column;
  justify-content: center;
  align-items    : center;
  position       : fixed;
  top            : 10px;
  right          : 1.5%;
  cursor         : pointer;
  z-index        : 20;
  display        : none;
}

.sp_btn span {
  width     : 100%;
  height    : 3px;
  background: #FDBCC0;
  display   : inline-block;
  transition: all 0.3s;
}

.sp_btn span:nth-child(2) {
  margin: 7px 0;
}

.sp_btn.active span:nth-child(1) {
  transform : translateY(14px) rotate(-45deg);
  transition: all 0.3s;
  background: #fff;
}

.sp_btn.active span:nth-child(2) {
  transform       : scaleX(0);
  transform-origin: right top;
  transition      : transform .3s;
}

.sp_btn.active span:nth-child(3) {
  transform : translateY(-6px) rotate(45deg);
  transition: all 0.3s;
  background: #fff;
}


/* -- responsive ----------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .header {
    height: 20px;
  }

  .header_nav {
    width     : 100%;
    height    : 100vh;
    position  : fixed;
    top       : 0;
    left      : 0;
    opacity   : 0;
    transition: all .7s;
    visibility: hidden;
    z-index   : 20;
    background: #FDBCC0;
  }

  .header_nav.active {
    position  : fixed;
    top       : 0;
    left      : 0;
    opacity   : 1;
    visibility: visible;
    height    : 100vh;
    z-index   : 20;
    overflow-y: scroll;
    transition: all .7s;
    background: #FDBCC0;
  }

  .header_nav .nav_list {
    display: none;
  }
}

/* -------------------------------------
  sp_nav_list
--------------------------------------- */
@media screen and (max-width: 768px) {
  .sp_nav_list {
    display: flex;
  }
}

/* -------------------------------------
  sp_btn
--------------------------------------- */
@media screen and (max-width: 768px) {
  .sp_btn {
    display: flex;
  }
}

@media screen and (max-width: 540px) {
  .sp_btn {
    width: 32px;
    top  : 5px;
  }

  .sp_btn span {
    height: 3px;
  }

  .sp_btn span:nth-child(2) {
    margin: 5px 0;
  }

  .sp_btn.active span:nth-child(1) {
    transform: translateY(10px) rotate(-45deg);
  }
}



/* ================================================================

  fv

==================================================================*/
.fv {
  position: relative;
}

.fv_swiper-slide {
  height: 67vw !important;
}

.fv_swiper-slide img {
  height    : 100% !important;
  object-fit: cover !important;
}

.fv_left::before {
  content   : "";
  display   : inline-block;
  width     : 95%;
  height    : 55vw;
  background: #DEDDDD;
  position  : absolute;
  top       : 50%;
  right     : 2%;
  transform : translate(0, -50%);
}

.swiper-container.fv_slider {
  width       : 63%;
  margin      : 0;
  margin-right: auto;
}

.fv_right {
  width         : 60%;
  display       : flex;
  flex-direction: column;
  align-items   : flex-end;
  position      : absolute;
  top           : 15%;
  right         : 3%;
  z-index       : 10;
}

.fv_logo {
  width        : 90%;
  position     : relative;
  right        : 1.5vw;
  margin-bottom: 2%;
}

.fv_right_img {
  /* width: 70%; */
  width   : 65%;
  position: relative;
  right   : 2vw;
}

.fv_scroll {
  width    : 100%;
  font-size: 1.5rem;
  transform: rotate(90deg);
  display  : flex;
  position : absolute;
  bottom   : -32%;
  right    : -46.5%;
  z-index  : 20;
}

.fv_scroll:after {
  content      : "";
  display      : block;
  width        : 24vw;
  height       : 12px;
  border-bottom: 1px solid #75913D;
  border-right : 1px solid #75913D;
  transform    : skew(55deg);
  position     : relative;
  top          : -1px;
}

.sdgz{
    width: 40%;
    display: block;
    margin: -4% 0 0 auto;
}

/* -- responsive ----------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .fv_logo {
    width: 83%;
  }

  .fv_right_img {
    width: 80%;
  }

  .fv_scroll {
    display: none;
  }
}


.topics {
  padding: 6% 0;
}

.topi_list{
    width: 100%;
    margin: 30px auto;
    max-width: 788px;
}

.topi_list li{
    display: flex;
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 1em;

}
.img_thum{
    width: 12%;
    min-width: 100px;
    margin-right: 1em;
}

/* ================================================================

  information

==================================================================*/
.information {
  padding: 45px 0 55px;
  padding: 4% 0 10%;
}

.information_sec_ttl {
  font-size  : clamp(2.3rem, 5.2vw, 4.7rem);
  font-weight: 500;
}

.information_posts {
  margin-top: 3%;
}

.information_post {
  text-align: center;
}

.post_img{position:relative}
.post_img:before{
content: "";
 display: block;
 padding-top: 100%;
}
.post_img img {
  border-radius: 50%;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  object-fit: cover;
}


.post_date {
  font-size: clamp(1.0rem, .85vw, 1.4rem);
  font-weight: 500;
  margin     : 8px auto;
}

.post_txt {
  text-align: left;
  font-size  : 1.3rem;
  margin     : 0 auto;
  line-height: 1.3;
}

/* -- responsive ----------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 540px) {
  .information_posts {
    margin-top: 20px;
  }

  .post_txt {
    font-size: 1.2rem;
  }
}



/* ================================================================

  concept

==================================================================*/
.concept {
  position: relative;
}

.concept::before {
  content        : "";
  display        : inline-block;
  width          : 33%;
  height         : 24vw;
  background     : url(../img/concept-right.svg) no-repeat;
  background-size: 100%;
  position       : absolute;
  right          : 4%;
  top            : -13%;
  z-index        : -1;
}

.concept_container {
  width       : 98%;
  margin-right: auto;
}

.conceptsec_sec_ttl {
  width    : 22%;
  min-width: 140px;
  margin   : 0 auto;
  position : absolute;
  top      : 12%;
  left     : 53%;
  transform: translate(-53%, 0);
  z-index  : 10;
}

.concept_top {
  display        : flex;
  justify-content: space-between;
  align-items    : flex-end;
}

.concept_top_imgarea {
  width       : 55%;
  height      : 33vw;
  margin-right: 5%;
}

.concept_top_imgarea img {
  height    : 100%;
  object-fit: cover;
}

.concept_top_txtarea {
  width         : 40%;
  min-width     : 510px;
  padding-bottom: 1%;
}

.concept_top_txtarea .sec_ttl_ja {
  font-size: clamp(2.2rem, 1.6vw, 2.8rem);
}

.concept_top_txtarea .sec_ttl_ja span {
  letter-spacing: 0;
}

.concept_top_txtarea .txt {
  /* font-size: 1.3rem; */
  font-size  : clamp(1.3rem, 1vw, 1.6rem);
  line-height: 1.75;
  margin-top : 20px;
}

.concept_under_imgarea {
  margin-top: 4%;
}

.concept_under_imgarea ul {
  display        : flex;
  justify-content: space-between;
}

.concept_under_imgarea ul li {
  height: 15vw;
}

.concept_under_imgarea ul li:nth-child(2n-1) {
  width: 22%;
}

.concept_under_imgarea ul li:nth-child(2n) {
  width: 27%;
}

.concept_under_imgarea ul li img {
  height    : 100%;
  object-fit: cover;
}

/* -- responsive ----------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1150px) {
  .conceptsec_sec_ttl {
    top: 8%;
  }
}

@media screen and (max-width: 1000px) {
  .concept::before {
    right  : 3%;
    top    : 3%;
    z-index: 1;
  }

  .conceptsec_sec_ttl {
    position : static;
    margin   : 0 auto;
    transform: none;
  }

  .concept_top {
    flex-direction: column;
    padding       : 0 2%;
  }

  .concept_top_imgarea {
    width : 85%;
    height: 100%;
    margin: 20px auto 35px 0;
  }

  .concept_top_txtarea {
    width     : 100%;
    min-width : auto;
    text-align: center;
  }
}

@media screen and (max-width: 540px) {
  .concept_top {
    margin-bottom: 35px;
  }

  .concept::before {
    right: 1%;
    top  : 6%;
  }

  .concept_top_txtarea .txt {
    font-size: 1.4rem;
  }

  .concept_under_imgarea {
    display: none;
  }
}


/* ================================================================

  menu

==================================================================*/
.menu {
  padding: 4% 0 7.5%;
}

.menu_sec_ttl {
  width    : 25%;
  min-width: 170px;
}


.menu_item {
  width        : 180px;
  margin-right: 15px;
  margin-bottom: 6%;
}


.menu_item:nth-child(2n) {
  position: relative;
  top     : 4vw;
}

@media screen and (max-width: 768px) {
	.menu_item {
	  width        : 140px;
	}
}
@media screen and (max-width: 540px) {
	.menu_item {
	  width        : 120px;
	}
}
.menu_item_img img {
  border-radius: 50%;
}

.menu_item_name {
  font-size: clamp(1.3rem, 1.0vw, 1.6rem);
  letter-spacing: 0.1em;
  text-align    : center;
  margin-top    : 10px;
}

.menu_items {
  margin-top:40px;
  display: flex;
}
.menu_items_list {
  display: flex;
}
.menu_items_list:first-child {
  animation: loop 150s linear infinite;
}
 
.menu_items_list:nth-child(2) {
  animation: loop2 150s -100s linear infinite;
}
 
.menu_items_list:last-child {
  animation: loop3 150s -50s linear infinite;
}
 
@keyframes loop {
  0% {
    transform: translateX(200%);
  }
  to {
    transform: translateX(-100%);
  }
}
 
@keyframes loop2 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-200%);
  }
}
 
@keyframes loop3 {
  0% {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-300%);
  }
}

.underline{
    border-bottom: 1px solid;
    padding-bottom: 0.2em;
}

.menu_list{
	width: 90%;
    margin: 30px auto;
    max-width: 1100px;
	display:flex; 
	flex-wrap:wrap;
	flex-direction:row;
}
.menu_wrap{
	width:50%;
	padding:1em 20px;
}

@media screen and (max-width: 1180px) {
	.menu_wrap{
		width:50%;
	}
}
@media screen and (max-width: 768px) {
	.menu_wrap{
		width:100%;
	}
	.menu_list{
	  flex-direction:column
	}
}

.menu_wrap ul{
	padding:1em 0;
}
.menu_wrap ul li{
	font-size: clamp(1.3rem, 1.0vw, 1.6rem);
	margin:.8em 0;
	display:flex;
	justify-content: space-between
}

.menu_wrap ul li span.menuttl:before{
	display:inline-block;
	content:"●";
	font-size:8px;
	margin-right:1px;
}



.menu_wrap ul li span.price:before{
	display:inline-block;
	content:"・・・";
}
/* ================================================================

  online_shop

==================================================================*/
.online_shop {
  padding        : 40% 0 8%;
  background     : url(../img/online-shop-bg.png) no-repeat top;
  background-size: 100%;
}

.online_shop_ttl {
  width    : 27%;
  min-width: 180px;
}

.online_shop_items {
  padding-top: 5%;
}

.online_shop_item_list {
  display        : flex;
  flex-wrap      : wrap;
  justify-content: space-between;
}

.online_shop_item {
  width: 23%;
}

.online_shop_item_name {
  font-size : 1.7rem;
  margin-top: 8px;
  text-align: center;
}

.btn_online_shop {
  width     : 26%;
  min-width : 250px;
  height    : 5vw;
  max-height: 60px;
  min-height: 40px;
  background: #E493A5;
  margin    : 3% auto 0;
}

.btn_online_shop a {
  font-size      : clamp(1.6rem, 1.5vw, 2.0rem);
  color          : #fff;
  display        : flex;
  align-items    : center;
  justify-content: center;
  height         : 100%;
}

/* -- responsive ----------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 540px) {
  .online_shop_item {
    width        : 48%;
    margin-bottom: 25px;
  }

  .online_shop_item_name {
    font-size: 1.6rem;
  }
}


/* ================================================================

  shop_snfo

==================================================================*/
.shop_info {
  padding: 4.5% 0 3.5%;
}

.shop_info_ttl {
  width        : 23%;
  min-width    : 150px;
  margin-bottom: 1.8%;
}

.shop_info .shop_info_base {
    width: 90%;
    margin: 30px auto;
    line-height: 1.6;
    max-width: 680px;
    font-size  : clamp(1.3rem, 1vw, 1.6rem);
}

.shop_info_base dl {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
}
.shop_info_base dt {
	flex-basis: 15%;
	padding: 20px;
	background-color: #f1f1f1;
	border-bottom: 1px solid #ccc;
}
.shop_info_base dd {
	flex-basis: 85%;
	padding: 20px;
	background-color: #fff;
	border-bottom: 1px solid #ccc;
}
@media screen and (max-width: 559px) {
	.shop_info_base dl {
	flex-flow: column;
	}
}



.shop_info_map {
  height    : 40vw;
  min-height: 350px;
  margin    : 3% 0 2%;
}

.shop_add {
  text-align: center;
  position  : relative;
}

.shop_logo {
  width    : 50%;
  min-width: 280px;
  margin   : 0 auto;
}

.shop_add .txt {
  font-size    : clamp(1.6rem, 1.8vw, 2.0rem);
  margin-bottom: 10px;
}

.shop_tel {
  font-size  : clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 500;
}

.btn_top {
  width: 8%;
  max-width: 50px;
  min-width: 38px;
  position : absolute;
  top      : 40%;
  right    : 4%;
  cursor   : pointer;
}

/* -- responsive ----------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 540px) {
  .shop_info {
    padding: 8% 0;
  }

  .shop_info_map {
    margin: 30px 0 25px;
  }

  .shop_logo {
    margin-bottom: 10px;
  }

  .btn_top {
    right: 2%;
  }

  .sp_brnone{display:none;}
  .sp_left{
    text-align:left;
  }
}


/* ================================================================

  Animation

==================================================================*/
.fadein {
  transform: translateY(50px);
  opacity  : 0;
}

.fadein.is-active {
  transform : translateY(0);
  opacity   : 1;
  transition: 1s;
}

.c_fadein {
  transform: translate(-53%, 50px);
  opacity  : 0;
}

.c_fadein.is-active {
  transform : translate(-53%, 0);
  opacity   : 1;
  transition: 1s;
}

@media screen and (max-width: 768px) {
  .c_fadein {
    transform: translateY(50px);
    opacity  : 0;
  }

  .c_fadein.is-active {
    transform : translateY(0);
    opacity   : 1;
    transition: 1s;
  }
}