@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{ bottom: 20%; width: 100%; 
text-shadow: 0px 0px 10px rgba(255, 255, 255, 1), 
             0px 0px 10px rgba(255, 255, 255, 1),
             0px 0px 10px rgba(255, 255, 255, 1);
             text-align: center; line-height: 1.3; letter-spacing: -1px; z-index: 55; position: absolute; font-size: clamp(1.75rem, 0.875rem + 4.38vw, 2.625rem) }/*28-42*/


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

well

--------------------------------------------------------------------*/
.well{text-align: center; padding: 40px 0 60px; position: relative}
.well .text02{padding-top: 50px; margin-left: 8%; text-align: left; margin-bottom: 30px; font-size:clamp(0.938rem, 0.688rem + 1.25vw, 1.188rem) }/*15-19*/
.well .tate{position: absolute; top: 30px; right: 5%; text-align: left}
.well .pic{max-width:212px; width: 50%; margin-bottom: 50px }

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

lesson

--------------------------------------------------------------------*/
.lesson{text-align: center; background: #fff; padding: 40px 0 60px}
.lesson h2 img{max-width: 266px; width: 50%; margin-bottom: 20px}
.lesson .text0{margin-bottom: 30px; font-size:clamp(1.313rem, 1rem + 1.56vw, 1.625rem) }/*21-26*/ 

.lesson dl{display: flex; justify-content: space-between ;margin: 0 8%}
.lesson .me02 dl{flex-direction: row-reverse;}
.lesson dt{width: 65%;}
.lesson dt img{border-radius: 10px;}
.lesson dd{width: 30%; line-height: 1.5; margin-right: -2%}
.lesson .me02 dd{margin: 0 0 0 -3%}
.lesson dd .tate{letter-spacing: normal; text-align: left; font-size:clamp(1.313rem, 1rem + 1.56vw, 1.625rem) }/*21-26*/
.lesson dd .tate span{padding: 10px 0; border: 1px solid #ccc; display:inline-block; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/
.lesson .text{text-align: left; margin: 20px 8% 0px; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/
.lesson .li{text-align: right; margin: 10px 8% 60px 0 }
.lesson .li a{display:inline-block;font-size: 13px ;letter-spacing: normal;
  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;
}

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

.lesson .me03 .li{margin-bottom: 0}
/*--------------------------------------------------------------------

oil

--------------------------------------------------------------------*/
.oil{text-align: center; 
background-image:url("../img/aromahappiness-diary/si.png"), url("../img/bg.png") ;
background-repeat:  no-repeat, repeat;
background-size: 40% auto, 25px 25px;
background-position: right bottom, center;
padding: 40px 2% 40px 6%; margin: 0 5% 100px; border-radius: 10px}
.oil h3 img{width: 50%; max-width:298px; margin-bottom: 20px }
.oil .text{font-size:clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem) }/*18-24*/
.oil .text1{margin-bottom: 30px; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/
.oil .text2{text-align: left ; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/
/*--------------------------------------------------------------------

habit

--------------------------------------------------------------------*/
.habit{background: #fff; }
.habit dl{display: flex; justify-content: space-between; position: relative}
.habit dt{width: 70%}
.habit dt img{max-width:360px; border-radius: 0 10px 10px 0 }
.habit dd{width: 40%; position: absolute; right: 5%; top: -40px}
.habit dd .tate{line-height: 1.6; font-size:clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem)}/*18-24*/
.habit .waka{margin-top: 200px}
.habit .wabox{position: relative; margin: 40px 0; display: flex; justify-content: space-between; flex-direction: row-reverse;}
.habit .wabox img{width: 47%; border-radius: 10px 0 0 10px}
.habit .wabox p{width: 55%; left: 8%; top: 10%; position:absolute; z-index: 55;}
.habit .text01{margin: 0 8% 40px}
.habit .text01:last-child{padding-bottom: 80px ; margin-bottom: 0;}
.habit .book{margin-bottom: 30px}



@media screen and (min-width: 640px) {
.lesson dt {width: 70%;}
}

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

.lesson dd{margin-right: -6%}
.habit .waka{margin-top: 320px;}
.habit .wabox p{line-height: 2}
.habit .text01 {line-height: 2}
}