@charset "utf-8";
/* CSS Document 320-640 */

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

first

--------------------------------------------------------------------*/
.first{position: relative; padding-top: 20px}
.first dl{display: flex; justify-content: space-between; margin: 0 0 0 8%; line-height: 1.2; margin-bottom: 40px; align-items: center}
.first dt{width: 20%;}
.first dt img{max-width:117px; width:80% }
.first dd{width: 80%; margin-top: -2px}
.first .tate{position: absolute; top: 10px; right: 8%; z-index: 55; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/

.slid{position: relative; text-align: center}
.slid h2{width: 100%; text-align: center; line-height: 1.3; letter-spacing: -1px; z-index: 55; position: absolute; top: 8%; font-size: clamp(1.75rem, 0.875rem + 4.38vw, 2.625rem) }/*28-42*/
.slid h2 span{letter-spacing: 2px; display: block; font-size: clamp(3.125rem, 2.5rem + 3.13vw, 3.75rem)}/*50-60*/
.slick-slide li {
  display: block !important; /* inline-block を強制的に上書きして解除 */
}

.slick-slide img {
  display: block;
  width: 100%; /* 横幅いっぱいにする場合 */
  height: auto;
}
/*--------------------------------------------------------------------

well

--------------------------------------------------------------------*/
.well{text-align: center; padding: 60px 0 60px;}
.well .text0{margin-bottom: 30px}
.well .text0 img{width: 17px; vertical-align: middle; position: relative; top: -3px}
.well .text01{margin-bottom: 20px; font-size:clamp(1.313rem, 1rem + 1.56vw, 1.625rem) }/*21-26*/
.well .text02{margin-bottom: 30px; font-size:clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem) }/*18-24*/
.well ul{display: flex; justify-content: space-between; margin: 0 5%; flex-flow: wrap}
.well li{margin-bottom: 15px; background: url("../img/aromatherapy-course/bg.png") repeat; padding: 5px; border: 1px solid #ccc; width: 48%; border-radius: 10px; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/
.well li:last-child{width: 100%}

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

lesson

--------------------------------------------------------------------*/
.lesson{text-align: center; background: #fff; padding: 40px 0}

.lesson h2 img{max-width: 266px; width: 50%; margin-bottom: 30px}
.lesson .text{margin-bottom: 50px}
.lesson dl{display: flex; justify-content: space-between; position: relative ; margin-top: 60px}
.lesson dt{width: 60%; max-width: 335px; position: absolute; left: 0; top: 0}
.lesson dl.mt80{margin-top: 80px}
.lesson dt img{border-radius: 0 10px 10px 0}
.lesson dd{width:70%; margin: -30px 5% 0 auto; text-align: right; z-index: 5; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/
.lesson dd .tate{line-height: 1.6; margin: 0 0 30px auto; text-align: left; letter-spacing: normal; font-size:clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem) }/*18-24*/

.lesson dl.le{display: flex; flex-direction: row-reverse;}
.lesson dl.le dt{max-width:334px; left: auto; right: 0}
.lesson dl.le dt img{border-radius: 10px 0 0 10px}
.lesson dl.le dd{ margin: 0 auto 30px 5%; text-align: left}
.lesson dl.le dd .tate{margin: -30px auto 30px 0}

.lesson .try{margin-top: 60px}
.lesson .try dt{width:80%; max-width:470px; position: relative}
.lesson .try dd{width: 10%}
.lesson .try .te01a{padding: 20px 8% 40px 0; text-align: right; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/

.lesson .nakaflex{display: flex; margin: 20px 5% 0; align-items: flex-start;}
.lesson .nakaflex img{width: 80%; max-width:420px }
.lesson .nakaflex h3{width: 17%; text-align: left; letter-spacing: normal; margin-left: 3%; font-size:clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem) }/*18-24*/
.lesson .nakaflex h3 span{display: block; font-size: 13px}
.nakatext{ text-align: right; margin:20px 5% 70px 0; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/
.nakatext a{display: inline-block; padding: 20px 0 0 0;
  background:
    /* 1層目：初期表示される下線（#5d5d5d） */
    linear-gradient(
      to right,
      #cc8a89,
      #cc8a89
    ),
    /* 2層目：ホバー時に左から現れる下線（#ccc） */
    linear-gradient(
      to right,
      #ffcecd,
      #ffcecd
    );
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}

.nakatext a:hover {color: #ffcecd;
  background-size: 0 1px, 100% 1px;
}


.lesson .zoom{position: relative; text-align: right;  }
.lesson .zoom p{z-index: 5; position: absolute; left: 5%; top: 10%; text-align: left; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/
.lesson .zoom img{width: 80%; margin: 0 0 90px auto; max-width: 469px; border-radius: 10px 0 0 10px}

.lesson .kyouzai{text-align: left}
.lesson .kyouzai img{width: 80%; border-radius: 0 10px 10px 0}
.lesson .kyouzai p{padding-bottom:80px ; text-align: right; margin:20px 5% 0 0; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/
.lesson .kyouzai p .hoge{font-size: 12px}

.lesson .cur{position: relative; background: url("../img/bg.png") repeat; background-size:25px 25px; margin: 0 5%; border-radius: 10px; font-size: 13px}
.lesson .cur .img{max-width:45px; width: 10%; position: absolute; left: 0; top: 40px}
.lesson .cur .waka{position: absolute; left: 3%; top: -100px}
.lesson .cur ul{text-align: left; margin-left: 15%; padding: 40px 3% 40px 0}
.lesson .cur li{line-height: 1.3; margin-bottom: 10px}
.lesson .cur li:before {content: "-";}
/*--------------------------------------------------------------------

ov

--------------------------------------------------------------------*/
.ov{background: #fff; padding: 0 8%; text-align: center}
.ov .tit img{width: 60%; max-width: 266px; margin-bottom: 20px}
.ov dl{margin-bottom: 15px; text-align: left ; font-family: "Noto Sans JP", sans-serif; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/
.ov dt{margin-bottom: 10px; background: url("../img/bg3.png") repeat; color: #fff; text-align: center}


.ov .atte{text-align: left ; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/
.ov .atte span{display: block; text-align: center}
.ov .atte a img {
    width: 12px;
    vertical-align: middle;
}


.contactBox{ background: #fff; text-align: center; padding: 50px 10% 80px}
.contactBox a{box-shadow: 0 0 8px #333333; white-space: nowrap; display: block; padding: 20px 50px; border-radius: 10px; line-height: 1.4; background: #a9a17a; color: #fff; font-size: clamp(1.625rem, 1rem + 3.13vw, 2.25rem)}/*26-36*/
.contactBox a:hover{box-shadow:none}


@media screen and (min-width: 500px) {
.lesson dl.mt80{margin-top: 20px;}
.lesson dd{padding-bottom: 100px}
.lesson .nakaflex{margin-top: -70px}
.lesson .mt20{margin-top: -30px}
.nakatext{margin-bottom: 80px}
.lesson .try {
    margin-top: 0;
}

}

@media screen and (min-width: 1100px) {
.first{ padding-top: 40px}
.first .tate{top: 40px}
}