body {
  font-family: 'IBM Plex Sans JP', sans-serif;
  line-height: 1.8;
  letter-spacing: .5px;
  font-weight: 400;
  font-size: 15px;
  box-sizing: border-box;
  background-color: rgba(193, 39, 45, 1);

}

img {
  max-width: 100%;
  height: auto;
}

.menu {
  display: none;
}

.inner {
  max-width: 375px;
  margin: 0 auto;
  background-image: url(../images/backcolor.jpg);
  background-position: top;
  overflow: hidden;
}


.menu.panelactive {
  position: fixed;
  z-index: 999;
  top: 0;
  width: 100%;
  height: 100vh;
}

.circle-bg {
  position: fixed;
  z-index: 4;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(210, 188, 0, 1);
  transform: scale(0);
  right: -50px;
  top: -50px;
  transition: all .6s;
}

.circle-bg.circleactive {
  transform: scale(50);
}


.menu.panelactive {
  display: block;
}

.menu ul {
  opacity: 0;
  display: flex;
  gap: 45px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90vh;
}

.menu.panelactive ul {
  opacity: 1;

}

.menu.panelactive ul li {
  animation-name: gnaviAnime;
  animation-duration: 1s;
  animation-delay: .2s;
  animation-fill-mode: forwards;
  opacity: 0;
  width: 170px;
}

@keyframes gnaviAnime {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.menu ul li {
  list-style: none;
}

.menu ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
}

.ham-menu {
  position: fixed;
  top: 20px;
  right: 30px;
  z-index: 9999;
  cursor: pointer;
  width: 50px;
  height: 50px;
}

.ham_r {
  opacity: 0;
}

@font-face {
  font-family: "しろくまフォント";
  src: url("../fonts/001Shirokuma-Regular.otf") format("opentype");
}

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

  .ham_r {
    opacity: 1;

  }
}

/* ================================================================================ */
/* top_image */
/* ===================================================================================*/



.wrapper {

  background-image: url(../images/main_pc.svg);
  background-repeat: repeat;
  vertical-align: top;
}

.target {
  opacity: 0;
  transform: translateY(20px);
  transition: 1s;
}

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

.target.left {
  opacity: 0;
  transform: translateX(20px);
  transition: 1s;
}

.is-active.left {
  opacity: 1;
  transform: translateX(0);
}

.target.right {
  opacity: 0;
  transform: translateX(-20px);
  transition: 1s;
}

.is-active.right {
  opacity: 1;
  transform: translateX(0);
}

.menu_l,
.menu_r {
  padding-left: 0;
  margin: 0;

}

.menu_l li,
.menu_r li {
  max-width: 15%;
  height: auto;
}

.menu_l img,
.menu_r img {
  width: clamp(6.25rem, 2.174rem + 6.52vw, 10rem);
  height: auto;
}

.menu_top {
  position: fixed;
  top: 43%;
  left: 2%;
  transform: rotate(6deg);
}

.menu_intro {
  position: fixed;
  top: 35%;
  left: 13%;
  transform: rotate(346deg);
}

.menu_macha {
  position: fixed;
  top: 19%;
  left: 22%;
  transform: rotate(338deg);
}

.menu_bekyoto {
  position: fixed;
  top: 19%;
  right: 21.5%;
  transform: rotate(22deg);
}

.menu_kitsuke {
  position: fixed;
  top: 35%;
  right: 13%;
  transform: rotate(12deg);
}

.menu_goods {
  position: fixed;
  top: 43%;
  right: 2%;
  transform: rotate(351deg);
}

.mainvi {
  background-image: url(../images/mainvi.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 812px;
  position: relative;
}

.main_btm {
  margin-top: 520px;
}

.insta {
  width: 135px;
  position: absolute;
  top: 434px;
  left: 32px;
  transition: .3s;
}

.insta:hover {
  opacity: .7;
}

.top_img {
  transform: translateY(25%);
  position: relative;
}

.top_img::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../images/insta_info.svg);
  background-size: 93% 93%;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: rotate 10s infinite linear;
  animation: rotate 30s infinite linear;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

li {
  list-style: none;
}

.slick-initialized .slick-slide {
  height: auto;
}

.float img:hover {
  transform: scale(1.1);
  transition: all .3s;
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}

.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}

.scroll-infinity__list--left {
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}

.scroll-infinity__item {
  width: 135px;
  margin-right: 20px;
}

.scroll-infinity__item>img {
  width: 100%;
}

@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0%);
  }
}

.scroll-infinity__list--right {
  animation: infinity-scroll-right 80s infinite linear 0.5s both;
}



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

  .menu_l,
  .menu_r {
    display: none;
  }
}



/* ================================================================================
            ハンドメイド椿とは
==================================================================================== */


@keyframes wave_top-left {
  from {
    transform: translateX(0);
    animation-delay: 3s;

  }

  to {
    transform: translateX(-100%);
  }
}

.wave_top {
  /* margin: -30px 0; */
}

.wave_top__wrap {
  display: flex;
  /* overflow: hidden; */
  flex-shrink: 0;
}

.wave_top__list {
  display: flex;
  flex-shrink: 0;
  list-style: none;
  padding: 0;
  max-width: 420px;
}

.wave_top__list img {
  width: 100%;
}

.wave_top__list--left {
  animation: wave_top-left 20s infinite linear 0.5s both;
  /* animation-fill-mode: forwards; */
  will-change: transform;
}

.wave_top__item,
.wave_top__item>img {
  width: 375px;
  height: auto;
  margin: auto -.5px;
}

@keyframes wave_btm-right {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

.wave_btm {
  /* margin: -30px 0; */
}

.wave_btm__wrap {
  display: flex;
  flex-shrink: 0;
  /* overflow: hidden; */
}

.wave_btm__list {
  display: flex;
  flex-shrink: 0;
  list-style: none;
  padding: 0;
}

.wave_btm__list--right {
  animation: wave_btm-right 20s infinite linear 0.5s both;
  will-change: transform;
}

.wave_btm__item,
.wave_btm__item>img {
  width: 375px;
  height: auto;
  margin: auto -.5px;
}

#about {
  background-color: rgba(210, 188, 0, 1);
  color: #fff;
}

h1,
h2,
h3,
h4 {
  text-align: center;
  padding: 10px;
}

h1 img {
  width: 75%;
  margin: 0 auto 20px;
}

#about p {
  width: 75%;
  margin: 0 auto;
  font-size: medium;
  text-align: center;
  font-weight: 500;
}

.tsubaki_img {
  width: 80px;
  height: auto;
  margin: 0 auto;
  padding: 20px;
}

.tsubaki_img img {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* ====================================================================================
at マチャプチャレ　＆　ｂｅ京都
==========================================================================================*/



.circle1 {
  display: inline-block;
  width: 125px;
  height: 125px;
  border-radius: 100%;
  box-sizing: border-box;
  border: 20px solid rgba(193, 39, 45, 1);
  animation: 3s linear infinite rotation;
}

.info {
  display: flex;
}

.info_box {
  width: 70%;
  margin: 50px auto 0;
  display: flex;
  flex-wrap: wrap;
  font-weight: 500;
}

#macha h2 img {
  width: 70%;
  margin: 10px auto 0px;
}

#macha h2,
#bekyoto h2 {
  padding: 35px 0;
}


#macha .info_box a,
#bekyoto .info_box a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  transition: .3s;
}

#macha .info_box a:hover {
  color: rgba(210, 188, 0, 1);
}

#bekyoto .info_box a:hover {
  color: rgba(50, 188, 210, 1);
}

#macha .info_box,
#bekyoto .info_box {
  color: #fff;
}

#bekyoto h2 img {
  width: 50%;
  margin: 10px auto 0px;
}

.info_box dt {
  width: 30%;
  margin: auto;
  padding-left: 20px;
}

.info_box dt img {
  width: 40px;
}

.info_box dd {
  width: 63%;
  margin: 1rem auto;
}

.dots {
  border-bottom: dotted;
  color: rgba(242, 235, 192, 1);
  border-width: 2px;
  width: 150px;
  margin: 30px auto;
}

.macha_img p,
.bekyoto_img p {
  color: #fff;
  text-align: center;
  font-weight: 500;
  margin: 25px;
}

.insta_ma_be {
  width: 135px;
  margin: 0 auto;
  transition: .3s;
}

.insta_ma_be:hover {
  opacity: .9;
  filter: brightness(130%);
}

#macha .top_img,
#bekyoto .top_img {
  margin: 15px auto;
  transform: translateY(0%);
}

.macha_img {
  background-image: url(../images/macha.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 670px;
}

.bekyoto_img {
  background-image: url(../images/bekyoto.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 695px;
}

.map_macha,
.map_bekyoto {
  text-align: center;
  padding: 65px 0px;
  height: 530px;
}

.map_macha {
  background-color: rgba(50, 188, 210, 1);
  margin: -5px 0;
}

.map_bekyoto {
  background-color: rgba(210, 188, 0, 1);
  margin: -5px 0;
}



/* =======================================================================
        着付け教室
===========================================================================*/

#class h2 img {
  width: 90%;
  margin: 30px auto 0px;
}

.dots1 {
  border-bottom: dotted;
  color: #fff;
  border-width: 2px;
  width: 150px;
  margin: 40px auto;
}

.child {
  margin-top: 40px;
  margin-bottom: 50px;
  text-align: center;
  color: rgba(50, 188, 210, 1);
  font-weight: 500;
}

.visit {
  width: 180px;
  margin: 25px auto 40px;
}

h3 {
  font-size: 23px;
  font-family: "しろくまフォント", sans-serif;
}

h3 img {
  width: 30px;
  height: auto;
  margin: 15px;
}

h4 {
  font-weight: 500;
}

h4 span {
  color: rgba(193, 39, 45, 1);
}

.bgn_c1 span,
.bgn_p1 span,
.norm1 span {
  color: rgba(242, 235, 192, 1);
}

.norm1 span {
  color: rgba(50, 188, 210, 1);
}

#beginner {
  background-image: url(../images/box1@2x.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: #fff;
  width: 330px;
  margin: auto;
  padding: 29px;
}

.beginner_c {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 1vw;
  grid-row-gap: 0px;
}

.bgn_c1 {
  grid-area: 1 / 1 / 2 / 2;
}

.bgn_c2 {
  grid-area: 1 / 2 / 2 / 3;
}

.bgn_c3 {
  grid-area: 2 / 2 / 3 / 3;
}

.bgn_c4 {
  grid-area: 3 / 2 / 4 / 3;
}

.dots2 {
  border-bottom: dotted;
  border-color: #fff;
  border-width: 2px;
  width: 150px;
  margin: 0 auto;
}

.beginner_p {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 1vw;
  grid-row-gap: 0px;
}

.bgn_p1 {
  grid-area: 1 / 1 / 2 / 2;

}

.bgn_p2 {
  grid-area: 1 / 2 / 2 / 3;

}

.bgn_p3 {
  grid-area: 2 / 2 / 3 / 3;

}

.bgn_p4 {
  grid-area: 3 / 2 / 4 / 3;

}

.bgn_p5 {
  grid-area: 4 / 2 / 5 / 3;

}

#normal {
  background-image: url(../images/box2@2x.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: #fff;
  width: 330px;
  margin: 40px auto 0;
}

#normal h3 {
  padding-top: 40px;
}

.normal_p {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(10, 1fr);
  grid-column-gap: 1vw;
  grid-row-gap: 0px;
}


.norm1 {
  grid-area: 1 / 1 / 2 / 2;

}

.norm2 {
  grid-area: 1 / 2 / 2 / 3;

}

.norm3 {
  grid-area: 2 / 2 / 3 / 3;

}

.norm4 {
  grid-area: 3 / 2 / 4 / 3;

}

.norm5 {
  grid-area: 3 / 2 / 4 / 3;

}

.norm6 {
  grid-area: 4 / 2 / 5 / 3;
}

.norm7 {
  grid-area: 5 / 2 / 6 / 3;

}

.norm8 {
  grid-area: 6 / 2 / 7 / 3;

}

.norm9 {
  grid-area: 7 / 2 / 8 / 3;

}

.norm10 {
  grid-area: 8 / 2 / 9 / 3;

}

.norm11 {
  grid-area: 9 / 2 / 10 / 3;

}

#advanced {
  background-image: url(../images/box3@2x.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: #fff;
  width: 330px;
  margin: 35px auto 0;
  padding: 5px;
}

.adv_p {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(8, 1fr);
  grid-column-gap: 1vw;
  grid-row-gap: 0px;
}

.adv1 {
  grid-area: 1 / 1 / 2 / 2;

}

.adv2 {
  grid-area: 1 / 2 / 2 / 3;

}

.adv3 {
  grid-area: 2 / 2 / 3 / 3;

}

.adv4 {
  grid-area: 3 / 2 / 4 / 3;

}

.adv5 {
  grid-area: 4 / 2 / 5 / 3;
}

.adv6 {
  grid-area: 5 / 2 / 6 / 3;
}

.adv7 {
  grid-area: 6 / 2 / 7 / 3;
}

.adv8 {
  grid-area: 7 / 2 / 8 / 3;
}

.adv9 {
  grid-area: 8 / 2 / 9 / 3;
}

#beginner p,
.adv1500 {
  width: 110px;
  height: 40px;
  color: rgba(50, 188, 210, 1);
  background-color: rgba(242, 235, 192, 1);
  border-radius: 10px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}


#normal p {
  width: 110px;
  height: 40px;
  color: #fff;
  background-color: rgba(50, 188, 210, 1);
  border-radius: 10px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

#advanced p {
  text-align: center;
}

.adv_about {
  margin: 30px;
  font-weight: 500;
}

#class dl {
  margin: 15px auto;
}

#class dt {
  justify-self: end;
}

#class dd {
  margin-inline-start: 0;
  white-space: nowrap;
}

#beginner b,
#normal b,
#advanced b {
  font-size: 18px;
  font-weight: 500;
}

.detail {
  width: 350px;
  margin: 10px auto;
  display: flex;
  justify-content: space-around;
  font-family: "しろくまフォント", sans-serif;
  align-items: flex-start;
}

.book p {
  text-align: center;
  color: rgba(193, 39, 45, 1);
  margin-top: -105px;
}

.book_text {
  letter-spacing: 1.5px;
}

.book span {
  color: rgba(210, 188, 0, 1);
}

.book1 {
  margin-top: 150px;
  font-size: 18px;
}

.book1 b {
  font-weight: 600;
}

.time {
  margin-top: 90px;
  text-align: center;
}

.time img,
.lending img {
  width: 160px;
  height: auto;
}

.lending {
  margin-top: 20px;
  text-align: center;
}

.time_p p,
.time_p span {
  margin-top: -110px;
  color: #fff;
  font-size: 20px;
}

.time_p span {
  font-size: 30px;
  font-weight: bold;
}

.time_p p {
  line-height: 40px;
}

.time_p span img {
  width: 30px;
  padding: 5px;
  margin-top: -15px;
}

.lending_p span {
  margin-top: -95px;
  color: #fff;
  font-size: 30px;
}

.lending_p p {
  margin-top: -105px;
  color: #fff;
  font-size: 20px;
}

.tel_red {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  transition: .3s;
}

.tel_red:hover {
  opacity: .7;
}

.tel_red dt {
  margin: 0 auto;
}

.tel_red dt img {
  width: 40px;
}

.tel_red dd {
  margin: 0 auto;
  color: rgba(193, 39, 45, 1);
  border-bottom: 3px dashed;
  font-size: x-large;
  font-weight: 900;
}

.tel_red a {
  text-decoration: none;
  color: rgba(193, 39, 45, 1);
  transition: .3s;
}

.tel_red a:hover {
  opacity: .7;
}

.book2 {
  background-image: url(../images/fukidashi.svg);
  background-repeat: no-repeat;
  height: 230px;
  background-position: center;
  margin: 30px auto 40px;
  padding-top: 160px;
  font-size: 16px;
  width: 325px;
}

.book2 b {
  font-size: 17px;
  font-weight: 600;
}

@media screen and (min-width: 414px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

/* ==================================================
   slider_page
==================================================*/

.goods_top .wave_top__list {
  margin-bottom: 0;
}

#goods {
  background-color: rgba(50, 188, 210, 1);
  height: 610px;
  margin-top: -40px;
}

#goods h2 img {
  width: 60%;
  margin: 30px auto 0px;
}

.goods_img {
  padding-bottom: 3em;
}

.slider {
  padding-left: 0;
  width: 85%;
  margin: 0 auto;
}

.slick-next {
  right: -15px;
  top: 110px;
}

.slick-prev {
  left: -15px;
  top: 140px;
  z-index: 2;
}

.slick-prev,
.slick-next {
  width: 50px;
  height: 50px;
}

.slick-prev::before {
  content: "";
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  background-image: url(../images/arrow_l.svg);
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: text-bottom;
  opacity: 1;
}

.slick-next::before {
  content: "";
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  background-image: url(../images/arrow_r.svg);
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: text-bottom;
  opacity: 1;
}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
}

.slick-slide img {
  padding: 10px;
}

.comment {
  padding-left: 30px;
  margin-top: -130px;
  margin-left: 190px;
  background-image: url(../images/textcolor.png);
  background-size: 160px;
  background-repeat: no-repeat;
}

.comment p {
  margin-top: 40px;
  margin-left: 10px;
  width: 70%;
  height: 21%;
  color: rgba(210, 188, 0, 1);
  font-weight: 500;
}

.comment .c_box1 p {
  padding-left: 0px;
  margin-left: 0px;
  margin-top: 45px;
  white-space: nowrap;
}

.comment .c_box4 p {
  margin-left: 20px;
}

.slick-dots li.slick-active button:before {
  color: #fff;
}

.slick-dots {
  position: absolute;
  bottom: -120px;
}

.andmore {
  font-family: "しろくまフォント", sans-serif;
  color: #fff;
  text-align: center;
  font-size: 25px;
}


/* ==========================================================================
            footer_page
==============================================================================*/

footer {
  background-color: rgba(242, 235, 192, 1);
  margin-top: -20px;
  color: rgba(193, 39, 45, 1);
  padding: 30px;
  line-height: 3em;
}

footer ul {
  padding-left: 0;
  margin: 30px auto;
}

footer ul li a {
  text-decoration: none;
  color: rgba(193, 39, 45, 1);
}

footer small {
  letter-spacing: normal;
}


/* ===============================================
# 追加CSS
=============================================== */
.wave_top__list--left>img:nth-of-type(2) {
  transform: translate(0, 0);
}

.wave_top__list--left {
  animation: wave_top-left2 20s infinite linear 0.5s both;
  margin-bottom: -1px;
  will-change: transform;
}

.wave_top__list--left {
  animation: wave_top-left2 20s infinite linear 0.5s both;
  margin-bottom: -1px;
  will-change: transform;
}
.wave_btm__list--right img:last-of-type {
  transform: translate(-0.4%, 0px);

}


@keyframes wave_btm-right2 {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes wave_top-left2 {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.wave_btm {
  margin-top: -1px;
}

.map_bekyoto {
  margin-top: -1px;
}

.macha_img,
.bekyoto_img {
  margin-bottom: -.5rem;
}

#goods {
  margin-top: -1.25rem;
  transform: translateY(-1px);
}

.andmore {
  margin-top: 3em;
}

::-webkit-full-page-media,
:future,
:root .wave_top__list--left>img:nth-of-type(2) {
  transform: translate(-16px, 0);
}

::-webkit-full-page-media,
:future,
:root .wave_btm__list--right>img {
  transform: translateY(-7px);
}

::-webkit-full-page-media,
:future,
:root .wave_btm__list--right img:last-of-type {
  transform: translate(-1.4%, -7px);
}


::-webkit-full-page-media,
:future,
:root .wave_top__list--left {
  animation: wave_top-left2 20s infinite linear 0.5s both;
  margin-bottom: -1px;
  will-change: transform;
}