@charset "UTF-8";

/*520px以下の記述。（モバイル）*/
.content {
}
@media screen and (min-width: 780px){
.splide{
  margin: 0 auto;
}
.splide.is-initialized:not(.is-active) .splide__list{
  margin: 0 auto !important;
}
}
@media screen and (max-width: 600px) {
.flex {
    flex-wrap: wrap;
  }
  }
/*521px〜960pxの記述。（タブレット）*/
@media screen and (max-width: 960px) {
.flex {
    flex-wrap: nowrap;
  }
  .tab-con {
      display: none;
    }
a.arbtn,p.arbtn {
  max-width: 300px;
  margin: auto;
}
/*===============================================
Instagram
===============================================*/
.instwp .inner {
  padding: 8vw 5vw 8vw;
}
.instwp .inner{
  padding: 8vw 0 ;
  width: 90%;
}
/*===============================================
ごあいさつ
===============================================*/
.profwp {
    margin: 0px auto 80px;
  }
.profwp .flex{
  gap: 0 5%;
}
.pro_illust {
  width: 75%;
  max-width:350px;
  margin: 0 auto 2vw auto;
}
.pro_text {
  max-width: 500px;
  width: 100%;
  margin: auto;
}
.pro_text .line {
    margin: 2vw 0;
}

 /*===============================================
gallery
===============================================*/

 /*===============================================
アトリエのご案内
===============================================*/
 .accesswp {
   text-align: center;
   padding: 80px 0px 120px 0;
   background: url(../img/top_acc_bgbtm.svg) no-repeat;
   background-position: bottom;
   background-size: contain;
 }
.ac_pic.sp-con{
  margin: 5vw auto;
}
.ac_cap .line{
  text-align: left;
}
 .ac_cap {
   max-width: 320px;
   width: 100%;
   margin: auto 0 auto 0;
   order: 2;
 }
 .ac_pic {
   position: relative;
   order: 1;
   width: 65%;
   max-width: 400px;
   margin:0 20px 2vw 0;
 }
.ac_pic .acpicsub {
  display: none;
}
/*===============================================
オンラインショップのご案内
===============================================*/
.shopwp{
  padding: 6vw 0;
}
.parent ,.child {
  max-width: inherit;
}
.child img {
  max-width: 300px;
  width: 80%;
  margin: auto;
}
.shopwp .arbtn{
  max-width: 85%;
  margin: 0 auto 20px;
}
.shopwp .type01 div{
  display: block;
}
.shopwp .type01 li{
  width: inherit;
  justify-content: center;
  text-align: center;
}
}
@media screen and (min-width: 1481px){
.fv .fvimg-top .cl-le{
  margin-left: 0%;
  width: 25%;
}
.fv .fvimg-top .cl-ri{
  margin-right: 0%;
  width: 65%;
  margin-left: auto;
}
.fvimg-right {
}
.fvimg-bird {
  left: 60%;
  top: 28%;
  width: 8%;
}
.fvimg-castle {
  left: 15%;
  top: 0%;
  width: 20%;
}
.fvimg-castle{
}
.fvimg-flower {
  bottom: -2%;
  width: 32%;
}
.fvimg-sun {
  top: -6%;
  left: 15%;
  width: 10%;
}
}
@media screen and (min-width: 1025px) and (max-width:1480px) {
.fv-wp h1 {
    font-size: 3.5em;
}
.fv .fvimg-top .cl-le{
  margin-left: 0%;
  width: 25%;
}
.fv .fvimg-top .cl-ri{
  margin-right: 0%;
  width: 65%;
  margin-left: auto;
}
.fvimg-bird {
  left: 60%;
  top: 28%;
  width: 8%;
}
.fvimg-castle {
  left: 15%;
  top: 0%;
  width: 20%;
}
.fvimg-castle{
}
.fvimg-flower {
  bottom: -2%;
  width: 32%;
}
.fvimg-sun {
  top: -10%;
  left: 15%;
  width: 12%;
}
}
@media screen and (min-width: 1025px) and (max-width:1200px) {
.fv-wp h1 {
    font-size: 3.2em;
  }
}
@media screen and (max-width: 960px) {
  .fv-wp h1 {
      font-size: 3em;
    }
}
@media screen and (min-width: 801px) and (max-width:1024px) {
.fv-wp h1 {
    font-size: 2.8em;
  }
.fv .fvimg-top .cl-le{
  margin-left: 0%;
  width: 25%;
}
.fv .fvimg-top .cl-ri{
  margin-right: -5%;
  width: 65%;
  margin-left: auto;
}
  .fvimg-right{
  top: inherit;
  right: 5%;
  width: 30%;
}
.fvimg-sun {
  top:-10%;
  left: 24%;
  width: 14%;
}
.fvimg-bird {
  left: 40%;
  top: 20%;
  width: 8%;
  max-width: 160px;
}
.fvimg-castle{
  left: 12%;
  top: 0%;
  width: 20%;
}
.fvimg-flower{
  bottom: -2%;
  width: 32%;
}

}
@media screen and (min-width: 800px) {
  .fv-sp-con {
    display: none;
  }

  .llist-sp {
    display: none;
  }

  .sp-con {
    display: none;
  }
}
@media screen and (max-width: 800px) {
  .fv-pc-con {
    display: none;
  }

  .fv-sp-con {
    display: block;
  }
.fv .fvimg-top .cl-le{
  margin-left: -15%;
  width: 40%;
}
.fv .fvimg-top .cl-ri{
  margin-right: -5%;
  width: 70%;
  margin-left: auto;
}
.fvimg-bird {
  left: 42%;
  top: 10%;
  width: 15%;
  max-width: 160px;
}
.fvimg-right {
  top: inherit;
  right: -2%;
  bottom: 10%;
  width: 40%;
}
.fvimg-sun {
  top: 0%;
  left: 24%;
  width:20%;
}
.fvimg-castle {
  left: 5%;
  top:-2%;
  width: 38%;
}

.fvimg-flower {
  top: inherit;
  left: 5%;
  bottom: -4%;
  width: 60%;
}
}
@media screen and (min-width: 800px) {
    .fv-sp-con {
        display: none;
      }
  .llist-sp {
    display: none;
  }
    .sp-con {
      display: none;
    }
}

@media screen and (max-width: 800px) {
.profwp {
  padding-top: 10vw;
}
    .pc-con {
        display: none;
      }
  .flex {
    flex-wrap: wrap;
  }

  .gll_btn {
    max-width: 100%;
    background: url(../img/top_bg_gall.jpg) no-repeat;
    background-position: top;
    background-size: contain, auto;
    background-color: #fef4ea;
    padding: 8vw 0 8vw;
  }

  .gll-llist {
    display: none;
  }

  .gll_btn {
    width: 100%;
    max-width: 500px;
    background-size: 100%, auto;
  }

  .llist-sp {
    display: block;
  }

  .gll_btn h3 {
    margin: 1vw 0px 2vw;
  }

  .gll_btn .lli_frame {
    max-width: 480px;
    width: 75%;
    margin: auto;
  }

  .gll_btn .btn {
    position: relative;
  }

  .gll_btn .btn .arbtn {
    margin-top: 20px;
  }

  .ac_cap {
    max-width: 500px;
    width: 100%;
    margin: auto;
  }

  .ac_pic {
    position: relative;
    order: 1;
    width: 65%;
    max-width: 400px;
    margin: 0 auto 2vw;
  }
}
@media screen and (max-width: 600px) {
.fv-wp h1 {
    font-size: 2.6em;
  }
  .ac_cap {
    width: 80%;
  }
.child{
  width: 100%;
}
.shopwp {
  padding: 10vw 0;
}
.pro_text .line{
  margin: 5vw auto;
}
/*===============================================
Google Calendar
===============================================*/
.eventwp {
  margin: 16vw auto 12vw;
}
.cl_list a,
.cl_list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  margin: auto;
}
.cl_list ul li{
  width: 85%;
  max-width: inherit;
  gap: 0;
}
.cl_list a .inner{
  padding: 8px 25px 16px 15px;
}
.cl_list a.arbtn{
  max-width: inherit;
}
}
@media screen and (max-width: 400px) {
  .fv-wp h1 {
    font-size: 2.2em;
  }
}
@media screen and (max-width: 375px) {

  /*===============================================
gallery
===============================================*/
  .gll_btn .lli_frame {
    max-width: 65%;
    margin: auto;
  }
}