@charset "UTF-8";

/*-------------------------------------------
共通設定
-------------------------------------------*/
/* pageheader  */

.page-header {
  height:10rem;
}

.page-header .img {
 background-image:url(../img/member/mainvisual2.webp);
 background-size: cover;
 background-position: 0 -2rem;
}


.page-header .page-title-area .page-title .en {
  font-size: var(--font-lg);
  font-weight: 500;
}
.page-header .page-title-area .page-title .ja {
  font-size: var(--font-md);
}


audio {
  filter: drop-shadow(0 0 5px rgba(255, 255, 0, 0.8));
  border-radius: 8px;
  background-color: rgba(255, 255,20, 0.1);
  backdrop-filter: blur(5px);
}

.session-wrapper{
 padding:2rem; 
}



/*-------------------------------------------
summary-area
-------------------------------------------*/

#summary-area .flex{
  display:flex;
  flex-direction: row-reverse;
}

#summary-area .flex .img{
 width:50%;

 margin-top:5rem;
}

#summary-area .flex .img img{
 width:100%;
 height:100%;
 object-fit: cover;
}

#summary-area .flex .text{
 width:50%;
 padding:1rem;
}



#summary-area dl{
  display:flex;
  flex-wrap: wrap;
}

#summary-area dt{
 width:20%;
 padding:1rem 0;
 border-bottom:1px solid var(--white);
}

#summary-area dd{
 width:80%;
 padding:1rem 0;
 border-bottom:1px solid var(--white);
}

/*-------------------------------------------
Sound-Area
-------------------------------------------*/

#sound-area .flex{
 display:flex;
 margin-bottom:1rem;
}

#sound-area .flex .img{
 width:50%;
 height:30rem;
}

#sound-area .flex .img img{
 width:100%;
 height:100%;
 object-fit:cover;
}

#sound-area .flex .sound{
 width:50%;
 padding:1rem;
}

#sound-area .flex .sound .description{
 margin-top:1rem;
}

/*-------------------------------------------
Flow-Area
-------------------------------------------*/

#flow-area .flex{
 display:grid;
 grid-template-columns: repeat(2,1fr);
 gap:1rem;
}

#flow-area .flex .img{
 width:100%;
 height:30rem;
 position:relative;
  margin-bottom:2rem;
}

#flow-area .flex .img img{
 width:100%;
 height:100%;
 object-fit: cover;
 object-position: center;
}

#flow-area .flex .img .num{
 display:block;
 position:absolute;
 padding:0.1rem 0.5rem;
 background-color:var(--white);
 border:3px solid var(--black);
 font-size:var(--font-xl);
 font-weight:500;
 font-family:'Dancing Script',serif;
 color:var(--black);
 border-radius: 30px;
 top:5px;
 left:5px;

}

#flow-area .flex .text{
 width:100%;
}



/*-------------------------------------------
gazing-area
-------------------------------------------*/

/*ソルフェジオ周波数*/
#gazing-area {
 margin-bottom:3rem;
}

#gazing-area .solfeggio .flex{
 display:flex;
 margin-bottom:1rem;
}

#gazing-area .solfeggio .flex .img{
  width:50%;
  height:20rem;
}

#gazing-area .solfeggio .flex .img img{
  width:100%;
  height:100%;
  object-fit: cover;
}

#gazing-area .solfeggio .flex .text{
  width:50%;
  padding:1rem;
}

/*イメージ効果*/
#gazing-area .image-effect .flex{
  display:flex;
  margin-bottom:1rem;
}

#gazing-area .image-effect .flex .img{
  width:50%;
  height:20rem;
}

#gazing-area .image-effect .flex .img img{
  width:150%;
  height:150%;
  object-fit: cover;
}

#gazing-area .image-effect .flex .text{
  width:50%;
  padding:1rem;
  display:grid;
  place-items: center;
}


#gazing-area .image-effect .flex .text .description{
  margin-top:1rem;
  border:2px solid var(--white);
  padding:2rem;
}

#gazing-area .description2{
  margin-top:1rem;
  padding:2rem;
}

/*-------------------------------------------
hypno-area
-------------------------------------------*/

#hypno-area .flex{
  display:flex;
}


#hypno-area  .flex .img{
  width:50%;
  height:30rem;
}

#hypno-area  .flex .img img{
  width:100%;
  height:100%;
  object-fit: cover;
}

#hypno-area .flex .text{
  width:50%;
  padding:1rem;
  display:grid;
  place-items: center;
}

#hypno-area  .flex .description{
  margin-top:1rem;
  border:2px solid var(--white);
  padding:2rem;
}

#hypno-area  .description2{
  margin-top:1rem;
  padding:2rem;
}



/*-------------------------------------------
スマートフォン
-------------------------------------------*/
@media screen and (max-width: 767px) {
/*-------------------------------------------
共通設定(sm)
-------------------------------------------*/
.page-header .img {
 background-position: 0 -10rem;
}

.page-header .page-title-area .page-title .en {
  margin-bottom:-3rem;
}

/*-------------------------------------------
summary-area
-------------------------------------------*/

/*-------------------------------------------
summary-area
-------------------------------------------*/

#summary-area .flex{
  flex-direction: column;
}

#summary-area .flex .img{
  width:100%;
}

#summary-area .flex .img img{
  width:100%;
}

#summary-area .flex .text{
 width:100%;

}


#summary-area dl{
  flex-direction: column;
}

#summary-area dt{
 width:100%;
 padding:1rem 0;
 border-bottom:1px solid var(--white);
}

#summary-area dd{
 width:100%;
 padding:1rem 0;
 border-bottom:none;
}


/*-------------------------------------------
Sound-Area(sm)
-------------------------------------------*/

#sound-area .flex{
 display:flex;
 flex-direction: column;
 margin-bottom:1.5rem;
}

#sound-area .flex .img{
 width:100%;
}

#sound-area .flex .sound{
 width:100%;
 padding:1rem;
}

/*-------------------------------------------
Flow-Area(sm)
-------------------------------------------*/

#flow-area .flex{
 grid-template-columns: repeat(1,1fr);
}

#flow-area .flex .img{
 width:100%;
 height:20rem;
 position:relative;
 margin-bottom:2rem;
}

#flow-area .flex .img img{
 width:100%;
 height:100%;
 object-fit: cover;
 object-position: center;
}

#flow-area .flex .text{
 width:100%;
}


/*-------------------------------------------
gazing-area(sm)
-------------------------------------------*/

/*ソルフェジオ周波数*/
#gazing-area {
 margin-bottom:0rem;
}

#gazing-area .solfeggio .flex{
 flex-direction: column;
}

#gazing-area .solfeggio .flex .img{
  width:100%;
  height:20rem;
}

#gazing-area .solfeggio .flex .img img{
  width:100%;
  height:100%;
  object-fit: contain;
}

#gazing-area .solfeggio .flex .text{
  width:100%;
  padding:1rem;
}


/*イメージ効果*/
#gazing-area .image-effect .flex{
  flex-direction: column;
}

#gazing-area .image-effect .flex .img{
  width:100%;
  height:20rem;
}

#gazing-area .image-effect .flex .text{
  width:100%;
}

#gazing-area .image-effect .flex .text .description{
  border:2px solid var(--white);
  padding:1rem;

}

#gazing-area .description2{
  margin-top:0rem;
  padding:0rem;
}

/*-------------------------------------------
hypno-area
-------------------------------------------*/

#hypno-area .flex{
  display:flex;
  flex-direction: column;
}


#hypno-area  .flex .img{
  width:100%;
}

#hypno-area  .flex .img img{
  width:100%;
}

#hypno-area .flex .text{
  width:100%;
  padding:1rem;
  display:grid;
  place-items: center;
}

#hypno-area  .description2{
  padding:0rem;
}



}