@charset "UTF-8";
/*-------------------------------------------
共通設定
-------------------------------------------*/

.session-wrapper{
 padding:2rem; 
}


/*-------------------------------------------
summary-area
-------------------------------------------*/
#summary-area dl{
  display:flex;
  flex-wrap: wrap;
}
#summary-area dt{
 width:20%;
 padding:1rem 1rem;
 border-bottom:1px solid var(--black);
 background: var(--back2);
}

#summary-area dt:nth-of-type(1){
 border-top:1px solid var(--black);
}

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

#summary-area dd:nth-of-type(1){
 border-top:1px solid var(--black);
}

/*-------------------------------------------
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:contain;
}
#sound-area .flex .sound{
 width:50%;
 padding:1rem;
}
#sound-area .flex .sound .description{
 margin-top:1rem;
}

audio {
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.8));
  border-radius: 8px;
  background-color: rgba(255, 255,20, 0.1);
  backdrop-filter: blur(5px);
}
/*-------------------------------------------
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:2rem;
}
#flow-area .flex .img img{
 width:100%;
 height:100%;
 object-fit: contain;
 object-position: center;
}
#flow-area .flex .img .num{
 display:block;
 position:absolute;
 padding:0.1rem 0.5rem;
 background-color:var(--back2);
 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: contain;
}
#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:100%;
  height:100%;
  object-fit: contain;
}
#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(--black);
  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: contain;
}
#hypno-area .flex .text{
  width:50%;
  padding:1rem;
  display:grid;
  place-items: center;
}
#hypno-area  .flex .description{
  margin-top:1rem;
  border:2px solid var(--black);
  padding:2rem;
}
#hypno-area  .description2{
  margin-top:1rem;
  padding:2rem;
}


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

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

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

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

#summary-area dt:nth-of-type(1){
 border-top:none;
}

#summary-area dd:nth-of-type(1){
 border-top: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;
}

#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{
  padding:1rem;
}
#gazing-area .description2{
  margin-top:0rem;
  padding:0rem;
}
/*-------------------------------------------
hypno-area
-------------------------------------------*/
#hypno-area .flex{
  flex-direction: column;
}

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

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


}