@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-family: 'Kaisei Tokumin', serif;
  font-style : normal;
  font-weight: 500;
  color      : #000;
}

body.noscroll {
  overflow: hidden;
}

.wrap {
  overflow: hidden;
}

a {
  transition: 0.4s;
}

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

main {
  margin-top: 80px;
}

.container {
  max-width: 1800px;
  margin   : 0 auto;
  padding  : 0 6%;
}

/* flexbox
--------------------------------------- */
.flexbox {
  display        : flex;
  justify-content: space-between;
}

/* caption  /  txt
--------------------------------------- */
.caption,
.txt {
  font-size  : max(1.6rem, 1.2vw);
  font-weight: 500;
  line-height: 1.8;
  text-align : justify;
}


/*common*/
.txt-center{text-align:center !important;}
.rad10{border-radius:10px;}
.rad20{border-radius:20px;}

.txt-white{color:#FFF;}

/* margin padding*/
.mt-1{margin-top:1rem}
.mt-2{margin-top:2rem}
.mt-3{margin-top:3rem}
.mt-4{margin-top:4rem}
.mt-5{margin-top:5rem}

.mb-1{margin-bottom:1rem}
.mb-2{margin-bottom:2rem}
.mb-3{margin-bottom:3rem}
.mb-4{margin-bottom:4rem}
.mb-5{margin-bottom:5rem}

.pt-1{padding-top:1rem}
.pt-2{padding-top:2rem}
.pt-3{padding-top:3rem}
.pt-4{padding-top:4rem}
.pt-5{padding-top:5rem}

.pb-1{padding-bottom:1rem}
.pb-2{padding-bottom:2rem}
.pb-3{padding-bottom:3rem}
.pb-4{padding-bottom:4rem}
.pb-5{padding-bottom:5rem}


/* br
--------------------------------------- */
.br_sp {
  display: none;
}

/* --------------------------------------------------------------

レスポンシブ  common parts

----------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .container {
    padding: 0 4%;
  }

  .flexbox {
    flex-direction: column;
  }

  .caption,
  .txt {
    font-size: max(1.3rem, 2.0vw);
  }
}


@media screen and (max-width: 600px) {
  main {
    margin-top: 65px;
  }

  .br_sp {
    display: block;
  }
}


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

Animation

===============================================================*/
/*  float
------------------------------------------ */
.float_01 {
  animation : float_01 5s infinite ease-in-out .8s alternate;
  display   : inline-block;
  transition: 1.5s ease-in-out;
}

@keyframes float_01 {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(3px, 15px);
  }

  100% {
    transform: translate(-3px, -10px);
  }
}

.float_02 {
  animation : float_02 4s infinite ease-in-out .8s alternate;
  display   : inline-block;
  transition: 1.5s ease-in-out;
}

@keyframes float_02 {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-2px, 15px);
  }

  100% {
    transform: translate(2px, -10px);
  }
}

/*  fadein
------------------------------------------ */
.fadein {
  transform: translateY(30px);
  opacity  : 0;
}

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

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}


.fadein_object {
  transform: translateY(30px);
  opacity  : 0;
}

.fadein_object.is-active {
  transform : translateY(-10px);
  opacity   : 1;
  transition: 1.5s;
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

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

loading

===============================================================*/
.loading {
  background     : url(./img/loading_bg.jpg) no-repeat center;
  background-size: cover;
  position       : fixed;
  width          : 100%;
  height         : 100%;
  z-index        : 10000;
}

.loading_logo {
  position : absolute;
  top      : 50%;
  left     : 50%;
  transform: translate(-50%, -50%);
  width    : 20%;
  max-width: 76px;
}

.fadeUp {
  animation-name     : fadeUpAnime;
  animation-duration : 0.8s;
  animation-fill-mode: forwards;
  opacity            : 0;
}

@keyframes fadeUpAnime {
  from {
    opacity  : 0;
    transform: translateY(50px);
  }

  to {
    opacity  : 1;
    transform: translateY(0);
  }
}

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

header

===============================================================*/
.header {
  height         : 80px;
  background     : url(./img/h_bg.jpg) no-repeat center;
  background-size: cover;
  transition     : all 0.3s;
  position       : fixed;
  top            : 0;
  left           : 0;
  right          : 0;
  z-index        : 1000;
}

.header.active {
/*  background: transparent;*/
  transition: all 0.3s;
}

.header .h_container {
  height         : 100%;
  padding        : 0 4%;
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  position       : relative;
}

.header .h_logo {
  width    : 48%;
  max-width: 280px;
  min-width: 200px;
}


/* --------------------------------------------------------------

レスポンシブ  header

----------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .header .h_container {
    padding: 0 20px;
  }

  .header .h_logo {
    margin: 0 auto;
  }
}


@media screen and (max-width: 600px) {
  .header {
    height: 65px;
  }
}


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

h_nav

===============================================================*/
.h_nav {
  width      : 80%;
  height     : 100%;
  margin-left: auto;
}

.h_nav ul {
  width          : 100%;
  height         : 100%;
  display        : flex;
  justify-content: flex-end;
  align-items    : center;
}

.h_nav ul li {
  font-size  : clamp(1.6rem, 3vw, 2rem);
  font-weight: 500;
  color      : #fff;
  margin-left: 4%;
}

.h_nav ul li:hover {
  filter    : brightness(130%);
  transition: 0.4s;
}

.h_nav ul li:first-child {
  margin-left: 0;
}

/*  sp_nav_item
-------------------------------------------------- */
.h_nav ul li.sp_nav_item {
  font-size      : clamp(2.4rem, 4.6vw, 3.2rem);
  font-family    : 'Noto Sans JP', sans-serif;
  font-weight    : 700;
  display        : flex;
  justify-content: center;
  align-items    : center;
  position       : relative;
  margin         : 30px auto 0;
  border-radius  : 10px;
  display        : none;
}

.h_nav ul li.sp_nav_item::before {
  content        : "";
  display        : inline-block;
  width          : 10vw;
  height         : 10vw;
  max-width      : 64px;
  max-height     : 64px;
  background     : url(./img/icon_tel.png) no-repeat;
  background-size: contain;
  margin-right   : 5%;
}


/* --------------------------------------------------------------

レスポンシブ  h_nav

----------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .h_nav {
    width          : 100%;
    height         : 100vh;
    position       : fixed;
    top            : 0;
    left           : 0;
    opacity        : 0;
    transition     : all .3s;
    visibility     : hidden;
    z-index        : -1;
    background     : #F0F1F2;
    padding        : 140px 20px 0;
    background     : url(./img/h_nav_bg.jpg) no-repeat center;
    background-size: cover;
  }

  .h_nav.active {
    position  : fixed;
    top       : 0;
    left      : 0;
    opacity   : 1;
    visibility: visible;
    height    : 100vh;
    z-index   : -1;
    overflow-y: scroll;
    transition: all .3s;
  }

  .h_nav ul {
    max-width     : 550px;
    height        : auto;
    flex-direction: column;
    margin        : 0 auto;
  }

  .h_nav ul li {
    color        : #C31D18;
    padding      : 24px 20px;
    width        : 100%;
    text-align   : center;
    background   : #fff;
    margin-right : 0;
    margin       : 0;
    margin-bottom: min(33px, 5.5vw);
    border-radius: 15px;
  }

  .h_nav ul li.sp_nav_item {
    display: flex;
  }
}


@media screen and (max-width: 600px) {
  .h_nav {
    padding: 100px 20px 0;
  }

  .h_nav ul li {
    padding: 18px 20px;
  }

  .h_nav ul li.sp_nav_item {
    margin: 15px auto 0;
  }
}


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

sp_menu_btn

===============================================================*/
.sp_menu_btn {
  width   : 38px;
  height  : 34px;
  position: absolute;
  right   : 4%;
  display : none;
}

.sp_menu_btn span {
  width     : 100%;
  height    : 7px;
  background: #fff;
  display   : block;
  transition: all 0.3s;
}

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

.sp_menu_btn.active span:nth-child(1) {
  transform : translateY(13px) rotate(-45deg);
  transition: all 0.3s;
}

.sp_menu_btn.active span:nth-child(2) {
  opacity         : 0;
  transform-origin: right center;
  transition      : transform 0.3s;
}

.sp_menu_btn.active span:nth-child(3) {
  transform : translateY(-14px) rotate(45deg);
  transition: all 0.3s;
}


/* --------------------------------------------------------------

レスポンシブ  sp_menu_btn

----------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .sp_menu_btn {
    display: block;
  }
}


@media screen and (max-width: 600px) {
  .sp_menu_btn {
    width : 25px;
    height: 28px;
  }

  .sp_menu_btn span {
    height: 4px;
  }

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

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

  .sp_menu_btn.active span:nth-child(3) {
    transform: translateY(-6.5px) rotate(45deg);
  }
}


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

mv

===============================================================*/
.mv {
    position: relative;
    padding: 10px 0 20px;
    background: url(./img/h_bg.jpg) 20px -25px;
    background-size: contain;
}

.mv_logo {
  width    : 9%;
  min-width: 42px;
  position : absolute;
  top      : 50%;
  left     : 50%;
  transform: translate(-50%, -50%);
  z-index  : 100;
}


.menu_item_img{
   position:relative;
   margin: 15px 10px;
}

@media screen and (max-width: 750px) {
	.menu_item_img{
	   margin: 7px 7px;
	}
}
.menu_item_img:before{
 content: "";
 display: block;
 padding-top: 100%;
}
.menu_item_img img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  object-fit: cover;
  border-radius:20px;
}

@media screen and (max-width: 750px) {
	.menu_item_img img {
	  border-radius:10px;
	}
}



/* --------------------------------------------------------------

レスポンシブ  mv

----------------------------------------------------------------*/


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

about

===============================================================*/
.about {
  padding        : 4vw 0 13vw;
  background     : url(./img/about_bg.jpg) no-repeat center;
  background-size: cover;
}

.about_top {
  margin-bottom: min(188px, 9.76vw);
  position     : relative;
}

.about .about_top .flexbox {
  position: relative;
}

.about .about_top .txtarea {
  width      : 47%;
  padding-top: 5%;
  position   : relative;
}

.about .about_top .txtarea::before {
  content        : "";
  display        : inline-block;
  width          : 18.7vw;
  height         : 19vw;
  max-width      : 299px;
  max-height     : 304px;
  background     : url(./img/about_ttl_img_l.png) no-repeat center;
  background-size: 100%;
  position       : absolute;
  top            : 2%;
  left           : -11%;
  animation      : float_01 5s infinite ease-in-out .8s alternate;
  display        : inline-block;
  transition     : 1.5s ease-in-out;
}

.about .about_top .txtarea::after {
  content        : "";
  display        : inline-block;
  width          : 15.4vw;
  height         : 11.4vw;
  max-width      : 246px;
  max-height     : 182px;
  background     : url(./img/about_ttl_img_r.png) no-repeat center;
  background-size: 100%;
  position       : absolute;
  top            : 35%;
  right          : -4%;
  z-index        : 11;
}

.about .sec_ttl {
  width    : 24%;
  min-width: 75px;
  margin   : 0 auto 53px;
  position : relative;
}

.about .about_top .imgarea {
  width   : 50%;
  position: absolute;
  right   : -4%;
}

.about .about_top .imgarea::before {
  width        : 113%;
  padding-top  : 55%;
  content      : "";
  display      : block;
  background   : rgba(155, 147, 131, .4);
  border-radius: 15px;
  position     : absolute;
  bottom       : -13%;
  right        : 9%;
  z-index      : 1;
}

.about .about_top .imgarea::after {
  content        : "";
  display        : inline-block;
  width          : 14.5%;
  height         : 7vw;
  max-width      : 100px;
  max-height     : 100px;
  background     : url(./img/about_object_m.png) no-repeat center;
  background-size: 100%;
  position       : absolute;
  right          : 18%;
  bottom         : -33%;
  z-index        : 10;
}

.about .about_top .imgarea img {
  position: relative;
  z-index : 10;
}

.about_bottom {
  position: relative;
}

.about .reverse {
  flex-direction: row-reverse;
  align-items   : center;
}

.about .reverse .imgarea {
  width   : 46%;
  position: relative;
  z-index : 10;
}

.about .reverse .imgarea::before {
  content      : "";
  display      : inline-block;
  width        : 92%;
  padding-top  : 50%;
  background   : rgba(155, 147, 131, .4);
  border-radius: 15px;
  position     : absolute;
  bottom       : -25%;
  left         : 15%;
  z-index      : -1;
}

.about .reverse .txtarea {
  width: 47%;
}

.about_object {
  width    : 3.59%;
  max-width: 57px;
  position : absolute;
  top      : -46px;;
  right    : 30%;
}

/* --------------------------------------------------------------

レスポンシブ  about

----------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .about {
    padding: 13vw 0 18vw;
  }

  .about .about_top .imgarea::before,
  .about .reverse .imgarea::before,
  .about .about_top .imgarea::after,
  .about_object {
    display: none;
  }

  .about_top {
    margin-bottom: 0;
  }

  .about .sec_ttl {
    margin: 0 auto 8vw;
  }

  .about .about_top .flexbox,
  .about .about_top .flexbox.reverse {
    align-items: center;
  }

  .about .about_top .txtarea {
    width        : 85%;
    padding-top  : 0;
    margin-bottom: 6.8vw;
  }

  .about .about_top .txtarea::before {
    width     : 34vw;
    height    : 36vw;
    max-width : 100%;
    max-height: 100%;
    top       : -18%;
    left      : -9%;
  }

  .about .about_top .txtarea::after {
    width     : 34vw;
    height    : 26vw;
    max-width : 100%;
    max-height: 100%;
    top       : 18%;
    right     : -8%;
  }

  .about .about_top .imgarea {
    width       : 73%;
    position    : static;
    margin-right: 26%;
  }

  .about .reverse {
    flex-direction: column-reverse;
  }

  .about .reverse .imgarea {
    width : 68%;
    margin: -14% 0 7.8vw 27%;
  }

  .about .reverse .txtarea {
    width: 85%;
  }
}


@media screen and (max-width: 600px) {
  .about {
    padding: 60px 0 18vw;
  }

  .about .about_top .txtarea::before {
    top : -12%;
    left: -10%;
  }

  .about .about_top .txtarea::after {
    top: 15%;
  }

  .about .sec_ttl {
    margin: 0 auto 50px;
  }
}


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

information

===============================================================*/
.information {
  padding   : 5% 0 10%;
  background: #fff;
  position  : relative;
}

.information::before {
  content        : "";
  display        : block;
  width          : 100%;
  height         : 20vw;
  background     : url(./img/info_shape02.png) no-repeat top;
  background-size: cover;
  position       : absolute;
  top            : -9%;
  left           : 0;
  right          : 0;
}

.information_object {
  width     : 21%;
  max-width : 338px;
  position  : absolute;
  /* top    : -50%; */
  top       : -30%;
  right     : 6%;
  z-index   : 20;
  animation : float_02 4s infinite ease-in-out .8s alternate;
  display   : inline-block;
  transition: 1.5s ease-in-out;
}

.information .container {
  padding: 0 2%;
}

.information .sec_ttl {
    font-size: clamp(3.0rem, 6vw, 4.6rem);
    font-weight: 700;
    font-family: 'Noto Sans JP', sans-serif;
    margin-bottom: min(52px, 4vw);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
}
.information .sec_ttl img{
    width: 35px;
    position: relative;
    top: 3px;
    right: 4px;
}


.information .swiper-slide:nth-of-type(even) {
  margin-top: 5%;
}


.information .swiper-slide .caption {
  line-height: 1.4;
  width: 90%;
  margin: 0 auto;
  font-size: max(1.2rem, 1.1vw);
}


.post_img{
   position:relative;
   margin: 10px 0;
}
.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;
}
/* --------------------------------------------------------------

レスポンシブ  information

----------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .information .sec_ttl {
    width : 41%;
    margin: 10% auto 35px;
  }

  .information_object {
    width        : 32vw;
    max-width    : 100%;
    top          : -20%;
    right        : 6%;
  }
}


@media screen and (max-width: 600px) {
  .information .sec_ttl {
    margin: 10% auto 20px;
  }
}


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

menu

===============================================================*/
.menu {
  padding        : 8% 0 12.5%;
  background     : url(./img/menu_bg.png) no-repeat top;
  background-size: cover;
  color          : #fff;
  position       : relative;
}

.menu .container {
  padding: 0 2%;
}

.menu .sec_ttl {
  width    : 8.7%;
  margin   : 0 auto 4.8%;
  position : relative;
  z-index  : 10;
}

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

.menu .menu_list_item {
  width           : 23%;
  display         : flex;
  margin-bottom   : 5%;
  position        : relative;
}

.menu .menu_list_item::before {
  content        : "";
  display        : inline-block;
  width          : 6.3vw;
  height         : 6.3vw;
  background     : url(./img/menu_object.png) no-repeat center;
  background-size: 100%;
  position       : absolute;
  top            : -18%;
  right          : 0;
}

.menu .menu_list_item a {
  width      : 100%;
  padding-top: 85.62%;
  border-radius: 10px;
}

.menu .menu_list_item._01 a {
  background     : url(./img/fd21.jpg) no-repeat center;
  background-size: cover;
}

.menu .menu_list_item._02 a {
  background     : url(./img/fd30.jpg) no-repeat center;
  background-size: cover;
}

.menu .menu_list_item._03 a {
  background     : url(./img/menu03.jpg) no-repeat center;
  background-size: cover;
}

.menu .menu_list_item._04 a {
  background     : url(./img/fd24.jpg) no-repeat center;
  background-size: cover;
}

.menu .menu_list_item._05 a {
  background     : url(./img/menu05.jpg) no-repeat center;
  background-size: cover;
}

.menu .menu_list_item._06 a {
  background     : url(./img/menu06.jpg) no-repeat center;
  background-size: cover;
}

.menu .menu_list_item._07 a {
  background     : url(./img/menu07.jpg) no-repeat center;
  background-size: cover;
}

.menu .menu_list_item._08 a {
  background     : url(./img/fd35.jpg) no-repeat center;
  background-size: cover;
}

.menu .menu_list_item._09 a {
  background     : url(./img/fd40.jpg) no-repeat center;
  background-size: cover;
}

.menu .menu_list_item._10 a {
  background     : url(./img/menu10.jpg) no-repeat center;
  background-size: cover;
}

.menu .menu_list_item._11 a {
  background     : url(./img/menu11.jpg) no-repeat center;
  background-size: cover;
}

.menu .menu_list_item._12 a {
  background     : url(./img/menu04.jpg) no-repeat center;
  background-size: cover;
}

.menu .item_name {
  /* font-size: 1.8rem; */
  font-size           : min(1.8rem, 1.4vw);
  font-weight         : 500;
  /* color            : #fff; */
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode    : tb-rl;
  writing-mode        : vertical-rl;
  margin-left         : 20px;
}

.menu .menu_caption {
  width    : 90%;
  max-width: 1100px;
  margin   : 1vw auto 0;
}

.menu .menu_caption .left {
  width: 60%;
}

.menu .menu_caption .txt {
  font-size     : min(3.5rem, 2.7vw);
  line-height   : 1.3;
  letter-spacing: 0.06em;
}

.menu .menu_caption .txt span {
  font-size  : min(1.8rem, 1.4vw);
  display    : block;
  line-height: 2.5;
}

.menu .menu_caption .right {
  width  : 40%;
  display: flex;
}

.menu .menu_caption .right h4 {
  font-size   : min(3.5rem, 2.7vw);
  margin-right: 20px;
}

.menu .menu_caption .right ul li {
  font-size: min(3rem, 1.8vw);
  line-height   : 1.7;
}

/* --------------------------------------------------------------

レスポンシブ  menu

----------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .menu {
    background     : url(./img/menu_bg_sp.png) no-repeat top;
    background-size: cover;
  }

  .menu .sec_ttl {
    width : 16%;
    margin: 0 auto 12%;
  }

  .menu .menu_list_item {
    width        : 31%;
    margin-bottom: 8.8%;
  }

  .menu .menu_list_item::before {
    width : 9vw;
    height: 9vw;
  }

  .menu .item_name {
    font-size: min(1.7rem, 2.3vw);
  }

  .menu .menu_caption {
    width: 100%;
  }

  .menu .menu_caption .flexbox {
    align-items: center;
  }

  .menu .menu_caption .left {
    width        : 100%;
    margin-bottom: 8.6%;
  }

  .menu .menu_caption .txt {
    font-size  : clamp(1.8rem, 4vw, 3.5rem);
    text-align : center;
    line-height: 1.4;
  }

  .menu .menu_caption .txt span {
    font-size: clamp(1.3rem, 2.1vw, 1.8rem);
  }

  .menu .menu_caption .right {
    width         : 100%;
    flex-direction: column;
  }

  .menu .menu_caption .right h4 {
    font-size      : clamp(2.4rem, 4.6vw, 3.9rem);
    text-align     : center;
    margin         : 0 0 3% 0;
  }

  .menu .menu_caption .right ul li {
    font-size : clamp(1.6rem, 3.2vw, 2.7rem);
    text-align: center;
  }
}


@media screen and (max-width: 768px) {
  .menu .menu_list_item {
    width: 48%;
  }

  .menu .menu_list_item::before {
    width : 11vw;
    height: 11vw;
    right : 0;
    top   : -15%;
  }

  .menu .item_name {
    font-size  : clamp(1.3rem, 3vw, 1.7rem);
    margin-left: 12px;
  }
}


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

shop

===============================================================*/
.shop {
  padding-top    : min(62px, 4.8vw);
  background     : url(./img/about_bg.jpg) no-repeat center;
  background-size: cover;
  color          : #BF2B1A;
  text-align     : center;
}

.shop .sec_ttl {
  font-size: clamp(3.0rem, 6vw, 4.6rem);
  font-weight  : 700;
  font-family  : 'Noto Sans JP', sans-serif;
  margin-bottom: min(52px, 4vw);
}

.shop .tel {
  font-size      : clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight    : 700;
  font-family    : 'Noto Sans JP', sans-serif;
  letter-spacing : 0.1em;
  color          : #fff;
  position       : relative;
  display        : flex;
  align-items    : center;
  justify-content: center;
  padding        : 28px 15px;
  background     : #BF2B1A;
  width          : 65%;
  max-width      : 556px;
  margin         : 0 auto;
  border-radius  : 15px;
}

.shop .tel::before {
  content        : "";
  display        : inline-block;
  width          : 6.5vw;
  height         : 6.5vw;
  max-width      : 74px;
  max-height     : 74px;
  min-width      : 35px;
  min-height     : 35px;
  background     : url(./img/icon_shop_tel.png) no-repeat center;
  background-size: 100%;
  margin-right   : 4%;
}

.shop .address {
  font-size     : clamp(1.6rem, 4vw, 2.8rem);
  font-weight   : 800;
  letter-spacing: 0.06em;
  line-height   : 1.5;
  margin        : 40px auto 66px;
}

.shop .address span {
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
  display  : block;
  margin-bottom: 1em;
}

.shop .map {
  height    : 37vw;
  min-height: 230px;
}



/* --------------------------------------------------------------

レスポンシブ  shop

----------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .shop .tel {
    padding: 3% 15px;
  }


  .shop .flexbox {
    flex-direction: initial;
    flex-wrap: wrap;
  }
  .shop_img{width:33.33333%}


}

@media screen and (max-width: 600px) {
  .shop {
    padding-top: 30px;
  }

  .shop .sec_ttl {
    margin-bottom: 30px;
  }

  .shop .tel {
    width        : 100%;
    max-width    : 345px;
    padding      : 16px 10px;
    border-radius: 10px;
  }

  .shop .address {
    margin: 6vw auto 7vw;
  }
}


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

footer

===============================================================*/
.footer {
  background     : url(./img/f_bg.jpg) no-repeat center;
  background-size: cover;
  height         : 185px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  position       : relative;
}

.footer .f_logo {
  width : 262px;
  margin: 0 auto;
}

.page_top {
  width          : 6vw;
  height         : 6vw;
  max-width      : 70px;
  max-height     : 70px;
  min-width      : 35px;
  min-height     : 35px;
  background     : url(./img/page_top.png) no-repeat center;
  background-size: 100%;
  position       : fixed;
  bottom:30px;
  right          : 3%;
  cursor         : pointer;
  z-index: 100;
}

/* --------------------------------------------------------------

レスポンシブ  footer

----------------------------------------------------------------*/
@media screen and (max-width: 600px) {
  .footer {
    height: 100px;
  }

  .footer .f_logo {
    width: 150px;
  }
}



/*画像を出現させるアニメーションCSS*/

.flipLeft{
animation-name: flipLeft;
animation-duration:0.5s;
animation-fill-mode:forwards;
perspective-origin: left center;
opacity: 0;
}

@keyframes flipLeft{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}