#profile{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; max-width: 1260px; margin: 0px 40px 0 40px;}
.greeting{width: 60%;}
.fade-slider {position: relative; width: 380px; height: 475px; overflow: hidden; border-radius: 190px 190px 0 0; margin: 0 auto;}
.fade-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: fadeSlide 12s infinite; }

/* 画像枚数に応じてディレイをずらす */
.fade-slider img:nth-child(1) { animation-delay: 0s; }
.fade-slider img:nth-child(2) { animation-delay: 3s; }
.fade-slider img:nth-child(3) { animation-delay: 6s; }
.fade-slider img:nth-child(4) { animation-delay: 9s; }

@keyframes fadeSlide { 0%   { opacity: 0; transform: scale(1); } 8%   { opacity: 1; } 25%  { opacity: 1; transform: scale(1.1) } 33%  { opacity: 0; transform: scale(1) } 100% { opacity: 0; } }

/*レッスン*/
#lesson{ margin: 0 0 0px 0; padding: 80px 40px; position: relative; display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; }
#lesson article{width: 48%; background-color: #fff; box-shadow: 3px 3px 6px #b2b2b2;}
#lesson article h2{margin: 40px 40px 20px 40px; border-left: 5px solid var(--green); padding-left: 10px; }
#lesson article p{margin: 0 40px;}
#lesson article p.mt20{margin: 20px 40px 0 40px;}
.lesson02{margin-top: 80px; background-image: url("../img/leaf02.svg"),url("../img/leaf.svg"); background-size: 32% auto,15% auto; background-repeat: no-repeat, no-repeat; background-position: right 44px bottom 44px, left 44px bottom 44px;}
.lesson01{margin-bottom: 80px; background-image: url("../img/leaf.svg"),url("../img/leaf02.svg"); background-size: 35% auto,19% auto; background-repeat: no-repeat, no-repeat; background-position: left 44px bottom 44px, right 44px top 44px;}
#lesson dl{margin: 20px 40px 0 40px; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; }
#lesson dl dt{width: 9em; background-color: var(--bg_green); padding: 0.2em 0.5em; border-right: 2px solid #fff; border-radius: 5px 0 0 5px;}
#lesson dl dd{width: calc(100% - 9em); background-color: var(--bg_yellow); padding: 0.2em 0.5em; border-radius: 0 5px 5px 0; margin-bottom: 2px; display: flex; justify-content: flex-start; align-items: center;}
#lesson .btn{margin-bottom: 40px;}
#lesson .mb10{margin-bottom: 10px;}

/*******tablet*******/
@media screen and (orientation: portrait){
#profile{display: block; margin: 80px 40px 0 40px;  }
.greeting{width: 100%; margin-top: 80px;}
.profile{width: 100%;}

#lesson{display: block;}
#lesson article{width: 100%;}
#lesson article h2{margin: 20px 40px 20px 40px;  }
.lesson02{margin-top: 40px; padding: 20px 0; }
.lesson01{margin-bottom: 0px; padding: 20px 0;  }
#lesson .btn{margin-bottom: 0px;}
}

/*******SP*******/
@media screen and (max-width:600px){
.fade-slider {position: relative; width: 60vw; height: 75vw; }
#profile{display: block; margin: 80px 20px 0 20px; }

#lesson{padding: 40px 20px 80px 20px;}
#lesson article p{margin: 0 20px;}
#lesson article p.mt20{margin: 20px 20px 0 20px;}
#lesson dl{margin: 20px 20px 0 20px; }
#lesson .mb10{margin-bottom: 10px;}
#lesson article h2{margin: 0px 20px 20px 20px;  }
}

/*******Wide*******/
@media screen and (min-width:1260px){
#profile{margin: 0 auto; }
#lesson{ padding: 80px calc(50% - 630px); }
}