.stit { font-family: "EB Garamond", serif; font-optical-sizing: auto; font-size: 120px; color:var(--green);}

/*firstview*/
#firstview header{display: flex; justify-content: flex-start; align-items:center ;}
#firstview header img{width: 6rem; height: auto; aspect-ratio: 1 / 1; margin: 0 1em 0 50px; }
#firstview h1{display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; flex-direction: column-reverse; }
#firstview header .tit{font-size: 1rem; color: var(--green); line-height: 1em; margin-top: 2em;}
#firstview header .tit .name{font-size: 1.2rem; margin-left: 0.6em; line-height: 1em;}
#firstview header .stit{font-style: italic; font-size: 4.2rem; }

/*leadtext_change*/
.leadtext{z-index: 5; position: absolute; padding: 0; left:calc(50% - 1.6em) ; top: -0.5em; -webkit-animation: leadtext 15s 0s infinite; animation: leadtext 15s 0s infinite; opacity: 0; }
.leadtext span{writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; /* Safari用 */font-size: 2.6vw; padding: 0.2em; background-color: var(--bg_white); }
.leadtext.lead01 {-webkit-animation-delay: 5s; animation-delay: 5s; }
.leadtext.lead02 {-webkit-animation-delay: 10s; animation-delay: 10s; }
@keyframes leadtext {0% {opacity: 0; } 10% {opacity: 1; } 33% {opacity: 1; } 40% {opacity: 0; } 100% {opacity: 0; }}
@-webkit-keyframes leadtext {0% {opacity: 0; } 10% {opacity: 1; } 33% {opacity: 1; } 40% {opacity: 0; } 100% {opacity: 0; }}

/*keyvisual*/
#keyvisual{display: block; position: relative; overflow: visible; width: 100%; max-width: 90%; margin: 0 auto; min-height: 45vw; }


.clip01 img,.clip02 img,.clip03 img,.clip04 img{filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.4)); }
.mask {position: absolute; overflow: hidden; margin: 0 auto;}
.mask img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.clip01{position: absolute; width: 20vw; height: auto; right: 0%; bottom: -20px; transform:rotate( -30deg); z-index: 4;}
.clip02{position: absolute; width: 24vw; height: auto; left: 0%; top: 0; z-index: 4;}
.clip03{position: absolute; width: 24vw; height: auto; right:24%; top: 14vw; transform:rotate( -40deg); z-index: 4;}
.clip04{position: absolute; width: 18vw; height: auto; left: 26%; top: 1vw; z-index: 4;}
.mask01{ height:27.5vw; width: 22vw; right:50%; top: -4vw; z-index: 2;}
.mask02{ height:27.5vw; width: 22vw; left:50%; bottom:2%; z-index: 2;}
.mask03{ width: 37.4vw; height: 30vw; right: 50%; bottom: 5%; z-index: 1;}
.mask04{ width: 37.4vw; height: 30vw; left: 50%; top: -2vw; z-index: 1;}
.mask05{ height:27.5vw; width: 22vw; right: 0; top: 14vw; z-index: 2;}
.mask06{ height:27.5vw; width: 22vw; left: 0; top:1vw; z-index: 2;}
.mask07{ width: 37.4vw; height: 30vw; left: 50%; top: -5vw; z-index: 1;}
.mask08{ width: 37.4vw; height: 30vw; right: 50%; bottom: 5%; z-index: 1;}

.maskscene{ opacity: 0; animation: fadeSlide 8s infinite; }
.clipscene{ opacity: 0; animation: fadeSlide02 8s infinite; }
.scene01 { animation-delay: 0s; }
.scene02 { animation-delay: 4s; }

@keyframes fadeSlide { 0% { opacity: 0; transform:scale(1); } 10%   { opacity: 1;} 45%  { opacity: 1;} 60%  { opacity: 0; transform: scale(1.2);} 100% { opacity: 0; } }

@keyframes fadeSlide02 { 0% { opacity: 0; } 5%   { opacity: 1;  } 45%  { opacity: 1;  } 60%  { opacity: 0;} 100% { opacity: 0; } }

main{display: block; background-color: #fff; position: relative; }

/*Info*/
#info{max-width: 1260px; display: block; margin: 0 auto; padding: 0 40px;}
#info h2{ position: relative; top: -0.4em; line-height: 1em; }
#info ul{width: 66%; padding-bottom: 80px;}
#info ul li{width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;
background-image: url("../img/arrow.svg"); background-size: 1em auto; background-repeat: no-repeat; background-position: left 0.5em top 0.4em; padding-left:2em;}

#info .date{width: 6em; margin: 0 0 0.5em 0; display: inline-block;}
#info ul li a {display:block; width: 100%; margin: 0 0 0.5em 0;}

/*今月のお菓子*/
span.oneline{display: block;}
#mouthly{background: var(--grd); width: 100%; padding: 0; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; position: relative; z-index: 2; }
#mouthly .en_tit{line-height: 1em; margin-left: 40px; z-index: 1; position: absolute; left: 0; top: -0.4em;  }
#mouthly .left{ width: 50%; position: relative; }
#mouthly .right{ width: 50%; text-align: center; }
#mouthly .right img{ width: 100%; display: block; margin: 0 auto;}
.monthly01{position: relative; width: calc(100% - 80px); margin-left:40px; padding-left: 3.5em; margin-top: 80px;}
.monthly01 p{margin:20px 0; }
.monthly01 .jn_tit{writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; /* Safari用 */ position: absolute; left: 0; top: 0; min-height:8em; font-size: 180%; color: var(--brown);}
.monthly02{margin:80px 0 40px 40px; width: 100%; background-color: var(--bg_white); padding: 20px 40px; box-shadow: 3px 3px 6px #b2b2b2; border: 1px solid #fff; position:relative; z-index: 2;}
.monthly02 h2{color:var(--green); margin-bottom: 20px; font-family: "Shippori Mincho B1", serif; font-weight: 400; font-style: normal;}
.monthly02 p{  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;  overflow: hidden;}
.monthly02 p.btn{display: flex;  overflow: visible;}
/*レッスン*/
#lesson{background-color: var(--bg_gray); margin: 0 auto; padding: 0 40px; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 2%; position: relative; z-index: 2;}
#lesson article a{display: inline-block; width: 100%; background-color: #fff;}
#lesson article{width: 32%; max-width: 400px; margin: 80px 0;}
#lesson .btn{background-repeat: no-repeat; background-position: left 14px center; border: 1px solid var(--green); padding: 5px; margin-bottom: 20px;}
#lesson .btn01{background-size: auto 6vw;  background-image: url("../img/icon_guide.webp"); background-image: image-set(url(../img/icon_guide.webp) 1x, url(../img/icon_guide_sp.webp) 2x); background-image: -webkit-image-set(url(../img/icon_guide.webp) 1x, url(../img/icon_guide_sp.webp) 2x);  }
#lesson .btn02{background-size: auto 7vw;  background-image: url("../img/icon_trial.webp"); background-image: image-set(url(../img/icon_trial.webp) 1x, url(../img/icon_trial_sp.webp) 2x); background-image: -webkit-image-set(url(../img/icon_trial.webp) 1x, url(../img/icon_trial_sp.webp) 2x);  }
#lesson .btn03{background-size: auto 7vw;  background-image: url("../img/icon_basic.webp"); background-image: image-set(url(../img/icon_basic.webp) 1x, url(../img/icon_basic_sp.webp) 2x); background-image: -webkit-image-set(url(../img/icon_basic.webp) 1x, url(../img/icon_basic_sp.webp) 2x);  }
#lesson .jn { font-family: "Shippori Mincho B1", serif; font-weight: 400; font-style: normal; color:var(--green);  display: block; font-size: 2vw;}
#lesson .en { font-family: "EB Garamond", serif; font-optical-sizing: auto; font-weight: normal; color:#999; position: relative; display: block; font-size: 2vw;}
#lesson h2{width: 100%; height: 100%; padding: 20px 5px 20px 10vw; border: 1px dotted var(--green); background-image: url("../img/arrow.svg"); background-size: auto 2vw; background-repeat: no-repeat; background-position: right 10px top 10px;}

/*教室について*/
#about{position: relative; z-index: 2; margin: 0 auto; padding:0; max-width: 1260px; }
#about .en_tit{line-height: 1em; z-index: 1; margin: 0; position: relative; top: -0.4em; left: 40px; max-width:calc(100% - 40px); }
#about h2{color: var(--brown); margin-bottom: 40px; border-bottom: 1px solid var(--brown); padding-bottom: 0.5em;}
#about article{display: flex; justify-content: center; align-items: center; flex-wrap: wrap;  }
#about .about_img{width: calc(50% - 40px); padding:80px 0; }
#about .right{width: calc(50% - 40px); padding:80px 0 80px 40px; margin: 0;}
#about .btn{display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap;}
#about p{margin: 20px 0;}
#about p.adress{background-color: var(--bg_green); border-radius: 5px; padding: 10px 20px; margin-top: 40px;}


/*これまでのお菓子*/
#pastsweets { position: relative; } 
.loop-gallery-container { width: 100%; margin: 0 auto; overflow: hidden; background: var(--grd); padding: 60px 0; z-index: 1; } 
.loop-gallery-track { display: flex; animation: scrollLoop 20s linear infinite; width: max-content; justify-content: flex-start; align-items: center; } 
.loop-item { width: 500px; height: 400px; margin: 0 10px; flex-shrink: 0;  }
 .loop-item:nth-child(even){ margin-top: 80px; } .loop-item:nth-child(odd) { margin-bottom: 80px; } 
 @keyframes scrollLoop { 0% { transform: translateX(0); } 100% { transform: translateX(-3120px); } }

 /*.loop-gallery-container:hover .loop-gallery-track { animation-play-state: paused; }*/
#pastsweets h2{position: absolute; top: 40px; left: 40px; background: var(--bg_white); padding: 20px; border: 1px solid #fff; z-index: 2;}
#pastsweets h2::before{content: ""; position: absolute; left: -10px; top: -10px; width: calc(100% + 20px); height:calc(100% + 20px); border: 1px solid #fff; }
#pastsweets h2 .jn{margin-bottom: 0.5em; color: var(--brown); display: block;}
#pastsweets ul{position: absolute; bottom: 40px; left: 0; width: 100%; max-width: 1260px; padding: 0 40px; display: flex; justify-content:space-between; align-items: stretch; }
#pastsweets ul li{width: 25%; background:var(--bg_white); border-radius: 5px; margin: 0 1%; text-align: center; font-size: 1.2em; filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.4)); padding: 5px; }
#pastsweets ul li a{border: 1px solid var(--green); display: block; border-radius: 5px; padding: 20px; background-image: url("../img/arrow.svg");
background-size: 1em auto; background-repeat: no-repeat; background-position: right 5px top 5px; height: 100%;}
#pastsweets ul li span{display: block;}

/*pick up*/
#pickup{border-top: 20px solid var(--bg_green); border-bottom: 20px solid var(--bg_green); display: flex; justify-content: center; align-items: stretch; flex-wrap:wrap; gap: 40px; width: 100%; margin: 0 auto; padding: 0 40px; position: relative; }
#pickup h2{width: 100%; position: relative; top: -0.4em; line-height: 1em; }
#pickup h3{color: var(--brown); margin: 20px 0 10px 0;}
#pickup > article {flex: 1;}
#pickup article{margin: 0px 0 80px 0;}
#pickup img{margin: 10px 0;}
#pickup small{line-height: 135%; margin-top: 20px; display: block;}
#pickup h2.en{line-height: 1em; z-index: 1; position: absolute; left: calc(0); top: -0.4em; margin: 0; }

/*schedule*/
#schedule{display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap;}
#schedule .left{width: 50%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
dl.calender{display: block; background-color:var(--bg_green);margin: 80px auto; border: 10px solid var(--bg_green); width: 340px; max-width: 96%; font-weight: bold; font-size: 22px; font-family:'Times New Roman', Times, serif; background: var(--grd); }
dl.calender dt{background: rgba(70,86,46,0.50); color: var(--green); text-align: center; padding: 0.2em; height: 40px;}
dl.calender dd{color: #fff; height: 40px; }
#schedule dd.day{font-size: 100px; height: 170px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
#schedule dd.month{text-align: center; }
#schedule dd.year{ color:var(--green); height: 40px; text-align: center; }
#schedule article{width: 50%; display: block; padding-right:40px ;}
#schedule h2{border-bottom: 1px solid var(--green); padding-bottom: 0.2em; text-align: right; margin-bottom: 40px;}


/*******tablet*******/
@media screen and (orientation: portrait){
.leadtext{left:auto; right: 2em; padding: 0.3em 0.5em; top: 70%;}
.leadtext span{writing-mode: horizontal-tb; -webkit-writing-mode:  horizontal-tb; /* Safari用 */font-size: 4vw; }
#keyvisual{min-height: 92vw; position: relative; margin: 20px auto; }
.leadtext{left:auto; top:calc(50% - 2em) ; right: 0; padding: 0.4em 1em; }
.clip01{position: absolute; width: 26vw; height: auto; right: 0%; bottom: -20px; transform:rotate( -30deg); z-index: 4;}
.clip02{position: absolute; width: 30vw; height: auto; left: 0%; top: -20px; z-index: 4;}
.clip03{position: absolute; width: 36vw; height: auto; left: 0%; right:auto; top: -20px; bottom: auto; z-index: 4; }
.clip04{position: absolute; width: 26vw; height: auto; right: 2%; left:auto; top:auto; bottom: 20px; z-index: 4;}
.mask01{ height:37.4vw; width:30vw; right:50%; top: 0; z-index: 2;}
.mask02{ height:37.4vw; width:30vw; left:50%; bottom:46px; z-index: 2;}
.mask03{ width: 50vw; height: 40vw; right: 0%; bottom: 46%; z-index: 1;}
.mask04{ width: 50vw; height: 40vw; left: 0%; top:  38%; z-index: 1;}
.mask05{ height:37.4vw; width:30vw; right: 50%; top: 15%; z-index: 2;}
.mask06{ height:37.4vw; width:30vw; left: 50%; top: 32%; z-index: 2;}
.mask07{ width: 50vw; height: 40vw; left: 46%; top: -5vw; z-index: 1;}
.mask08{ width: 50vw; height: 40vw; right: 46%; bottom: 5%; z-index: 1;}
#info ul{width: 100%;}
span.oneline{display: inline;}
#mouthly{flex-direction: column; }
#mouthly .left{ width: 100%; background: var(--grd); display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; flex-direction: column;  }
#mouthly .right{ width: 100%; text-align: right; }
#mouthly .right img{width: 100%; margin: -40px 0 0 auto; max-width: 600px; }
.monthly01{margin: 80px 40px 20px 40px; width: calc(100% - 80px); }
.monthly01 .jn_tit{top :0; margin: 0px 0;}
.monthly02{margin:40px 40px 0 0 ; width: calc(100% - 40px); }
#lesson{padding: 40px;}
#lesson article a{width: auto; }
#lesson article{width: 100%; max-width: 100%; margin: 0; display: flex; justify-content: start; align-items:flex-start; }
#lesson article p{margin-top:1em; width: calc(100% - 340px); }
#lesson .btn{margin-right: 20px; width:320px ;}
#lesson .btn01{background-size: auto 50%; }
#lesson .btn02{background-size: auto 55%; }
#lesson .btn03{background-size: auto 55%; }
#lesson .jn { font-size: 28px;}
#lesson .en { font-size: 28px;}
#lesson h2{padding: 20px 5px 20px 90px; background-position: right 10px bottom 10px; background-size: auto 30px; }

#about{height: auto;}
#about .en_tit{left: 40px;}
#about article{height: auto; display: block; }
#about .about_img{width: 100%; max-width: 600px; padding:40px 0 0; margin: 0 auto; }
#about .right{width: 100%; padding:80px 40px; margin: 0; }

#pastsweets{background: var(--grd); padding-top: 20px; padding-bottom: 40px;}
.loop-gallery-container {padding: 0;}
.loop-item { width: 200px; height: auto; margin: 0 10px; }
.loop-item:nth-child(odd){ margin: 50px 10px 0px 10px;}
.loop-item:nth-child(even){ margin: 0px 10px 50px 10px;}
	
@keyframes scrollLoop{ 0%{ transform: translateX(0);} 100%{transform: translateX(-1320px);} }

#pastsweets h2{position: relative; top: 20px; left: 20px; right: 0; width: auto;  display: inline-block;}
#pastsweets ul{position: relative; bottom: auto; left: 0; width: 100%; padding: 0; flex-wrap: wrap; }
#pastsweets ul li{width:calc(50% - 20px) ; margin: 5px 10px; font-size: 1em; padding: 5px; line-height: 1.4em; }
#pastsweets ul li a{ padding: 0px;}

#pickup{display: block; padding-bottom: 80px;}

#pickup h3{color: var(--brown); margin: 20px 0 10px 0;}
#pickup article{margin: 20px 0 0 0; width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 20px;}
#pickup a{margin: 0;}
#pickup .right{width: calc(100% - 270px);}
#pickup .thumnail{width: 250px; max-width: 100%;}

#schedule{display: block;}
#schedule .left{width: auto; }
dl.calender{display: block; margin: 40px; width: 250px; }
dl.calender dt{height: 35px;}
dl.calender dd{height: 35px; }
#schedule dd.day{font-size: 90px; height: 120px;}
#schedule dd.year{height: 35px; }
#schedule article{width: auto; display: block; padding:40px ;}
#schedule h2{width: auto; border-bottom: none; padding-bottom: 0; text-align: left; margin-bottom: 40px;}
}


/*******SP*******/
@media screen and (max-width:600px){
.leadtext{width: 90%; left:5%; right: 5%; padding: 0; top: 40%; }
.leadtext span{font-size: 1.2rem; width: 100%; display: block; text-align: center;}
#firstview header{display: flex; justify-content: center; align-items: center; flex-wrap: wrap; flex-direction: column; padding-top: 20px; padding-bottom: 20px;}
#firstview header h1{display: block; text-align: center; margin: 0 0 20px 0; padding: 0;  }
#firstview header .tit{font-size: 1rem; display: block; margin: 0; line-height: 1.2em; font-weight: normal; }
#firstview header .tit .name{font-size: 1.2rem; display: block; margin: 0; line-height: 1.2em;}
#firstview header .stit{font-size: 3.8rem; margin: 0; line-height: 1em;}
#firstview header img{width: 6rem; height: auto; aspect-ratio: 1 / 1; margin: 0px 20px 20px 20px; }

#info{padding: 0 20px;}
#info ul{width: 100%;}
#info ul li{display: block;}
#info .date{width: 100%; margin: 0;}

#mouthly .en_tit{margin-left: 20px;}
#mouthly .right img{margin: -20px 0 0 auto;}
.monthly01{margin: 40px 0 0 0; width:100%; padding:20px;}
.monthly01 .jn_tit{position:relative; top :0; margin: 0; min-height: 1em; writing-mode: horizontal-tb; -webkit-writing-mode:  horizontal-tb; }
.monthly02{margin:0px 40px 0 0 ; width: calc(100% - 20px); padding: 20px;}

#lesson{ padding: 20px 20px 40px 20px;}
#lesson article{display: block; margin: 20px 0 0 0;}
#lesson article p{margin:0 auto; width: 80%; text-align: center; }
#lesson .btn{width:90% ; max-width: 320px; margin: 0 auto; display: block; }
#lesson .btn01{background-size: 80px auto ; background-position: top 20px center; }
#lesson .btn02{background-size: 80px auto ;  background-position: top 20px center; }
#lesson .btn03{background-size: 80px auto ;  background-position: top 20px center; }
#lesson .jn { font-size: 28px;}
#lesson .en { font-size: 28px;}
#lesson h2{padding: 90px 5px 20px 5px; background-position: right 10px bottom 10px; text-align: center;}

#about .en_tit{left: 20px;}
#about .about_img{ padding:40px 0 80px 0;}
#about .right{width: 100%; padding: 0 20px 40px 20px;}
#pickup{padding: 0 20px;}
#pickup article{display: block; margin-bottom: 80px;}
#pickup .right{width: 100%;}
#pickup .thumnail{width:300px; max-width: 100%; margin-left: auto; margin-right: auto;}

#schedule article{ padding:20px; width: 100%;}
}

/*******Wide*******/
@media screen and (min-width:1260px){
#firstview header img{width: 8rem;}
#firstview header .tit{font-size: 1.2rem;}
#firstview header .tit .name{font-size: 1.4rem; }

.clip01{position: absolute; width: 300px; height: auto; right: 0%; bottom: -20px; transform:rotate( -30deg); z-index: 4;}
.clip02{position: absolute; width: 300px; height: auto; left: 0%; top: 0; z-index: 4;}
.clip03{position: absolute; width: 300px; height: auto; right:24%; top: 55%; transform:rotate( -40deg); z-index: 4;}
.clip04{position: absolute; width: 250px; height: auto; left: 26%; top: 1vw; z-index: 4;}
.mask01{ height:374.3px; width: 300px; right:50%; top: 0px; z-index: 2;}
.mask02{ height:374.3px; width: 300px; left:50%; bottom:100px; z-index: 2;}
.mask03{ width: 549px; height: 440px; right: 50%; bottom:50px; z-index: 1;}
.mask04{ width: 549px; height: 440px; left: 50%; top: -50px; z-index: 1;}
.mask05{ height:374.3px; width: 300px; right: 0; bottom: 100px; top:auto; z-index: 2;}
.mask06{ height:374.3px; width: 300px; left: 0; top:-20px; z-index: 2;}
.mask07{ width: 549px; height: 440px; left: 50%; top: 50px; z-index: 1;}
.mask08{ width: 549px; height: 440px; right: 50%; bottom: 50px; z-index: 1;}


.leadtext{top:-1em;}
.leadtext span{font-size: 2.2rem;}
#keyvisual{max-width: 1260px; min-height: 800px; height: 800px; }
#info{padding: 0;}
#mouthly .en_tit{margin-left: calc(50% - 630px); }
#mouthly .right img{ width: 630px; margin: 0; padding-left:40px;}
.monthly01{width: 630px; margin-left: calc(100% - 630px);}
.monthly02{margin:80px 0 40px calc(100% - 630px); width: 690px; }
#lesson .jn { font-size: 30px;}
#lesson .en { font-size: 30px;}
#lesson h2{ background-size: auto 40%; padding: 20px 5px 20px 110px; }
#lesson .btn01{background-size: auto 60%; }
#lesson .btn02{background-size: auto 66%; }
#lesson .btn03{background-size: auto 66%; }
#about{margin: 0 auto;}
#about .en_tit{left: 0px; max-width:100%; }
#about .about_img{width:50%; }
#about .right{width: 50%;}
#about .btn{display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap;}
#pastsweets ul{position: absolute; bottom: 35px; left: calc(50% - 630px); padding: 0; }
#pastsweets ul li{min-width: 10em;  margin: 0 20px;}
#pickup{ padding: 0 calc(50% - 630px); }
#schedule article{padding-right:calc(50% - 630px);}
}