/*-------------------------------------------
Gude 初心者ガイドページ
-------------------------------------------*/

@charset "UTF-8";

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

.inner{
 width:90%;
 margin:0 auto;
}


/*-------------------------------------------
prepare
-------------------------------------------*/

#prepare{
  margin-bottom:10rem;
}

#prepare .flex{
  display:flex;
}

#prepare .flex .text{
 width:50%;
 padding:0.5rem;
}

#prepare .flex .img{
 width:50%;
 padding:0.5rem;
}

#prepare .flex .img img{
 width:100%;
 object-fit: cover;
}


#prepare .flex2{
 display:flex;
}

#prepare .flex2 .left{
 width:50%;
 padding:0.5rem;
}

#prepare .flex2 .left img{
 width:100%;
 height:17rem;
 object-fit: cover;
}

#prepare .flex2 .right{
 width:50%;
 padding:0.5rem;
}

#prepare .flex2 .right img{
 width:100%;
 height:17rem;
 object-fit: cover;
}


/*-------------------------------------------
onsei
-------------------------------------------*/

#onsei .flex{
 display: flex;
}

#onsei .flex .left{
 width:50%;
 padding:1rem;
}

#onsei .flex .left .img{
 width:100%;
 height:20rem;
}

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


#onsei .flex .right{
 width:50%;
 padding:1rem;
}

#onsei .flex .right .img{
 width:100%;
 height:20rem;
}

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



/*-------------------------------------------
work紹介
-------------------------------------------*/

#work {
margin-bottom: 10rem;
}

#work .img {
 width:100%;
 margin-bottom: 3rem;
}

#work .img img{
 width:100%;
 object-fit: cover;
}

p{
 margin:1rem;
}


dl{
 width:100%;
 display: flex;
 flex-wrap: wrap;
 margin-bottom: 3rem;
}

dt{
 width:20%;
 padding:0.5rem;
 display:grid;
 place-items: center;
 border-bottom: 1px solid var(--light-gold);
 font-size: var(--font-lg);
}

dt:first-child{
 border-top: 1px solid var(--light-gold);
}

dd{
 width:80%;
 padding:0.5rem;
 border-bottom: 1px solid var(--light-gold);
}

dd:nth-child(2){
 border-top: 1px solid var(--light-gold);
}

dd span{
 display:inline-block;
 color:var(--light-gold);
}

.flow{
 display:inline-block;
 font-size: 1.5rem;
 border:1px solid var(--light-gold);
 padding:0.5rem;
 margin:1rem 0;
}

/*-------------------------------------------
dowsing
-------------------------------------------*/

#dowsing {
 width:100%;
 margin-bottom: 10rem;
}

#dowsing .flex{
 display:flex;
}

#dowsing .text{
 width:50%;
 padding:1rem;
}

#dowsing .img{
 width:50%;
 display:grid;
 place-items: center;
}


/*-------------------------------------------
breathe
-------------------------------------------*/
#breathe {
  margin-bottom:10rem;
}

#breathe .flex{
  display:flex;
}

#breathe .flex .text{
  width:50%;
  padding:0.5rem;
  margin-bottom:2rem;
}

#breathe .flex .img{
  width:50%;
  display:grid;
  place-items: center;
}

#breathe .flex .img img{
  width:80%;
}


/*-------------------------------------------
mindfullness
-------------------------------------------*/
#mindfullness {
  margin-bottom:10rem;
}


 #mindfullness .flex{
  display:flex;
}

 #mindfullness .flex .text{
  width:50%;
  padding:0.5rem;
  margin-bottom:2rem;
}

 #mindfullness .flex .img{
  width:50%;
  display:grid;
  place-items: center;
}

 #mindfullness .flex .img img{
  width:80%;
}

/*-------------------------------------------
gazing
-------------------------------------------*/
 #gazing {
  margin-bottom: 10rem;
}

 #gazing .flex{
  display:flex;
}

 #gazing .flex .text{
  width:50%;
  padding:0.5rem;
  margin-bottom:2rem;
}

 #gazing .flex .img{
  width:50%;
  display:grid;
  place-items: center;
}

 #gazing .flex .img img{
  width:100%;
  padding:1rem;
}

 #gazing .flex2{
  display:flex;
}

 #gazing .flex2 .text{
  width:50%;
  padding:0.5rem;
  margin-bottom:2rem;
}

 #gazing .flex2 .img{
  width:50%;
  display:grid;
  place-items: center;
}

 #gazing .flex2 .img img{
  width:100%;
  padding:1rem;
}

/*-------------------------------------------
hypnosis
-------------------------------------------*/
#hypnosis {
 margin-bottom: 10rem;
}

#hypnosis .flex{
  display:flex;
}

#hypnosis .flex .text{
  width:50%;
  padding:0.5rem;
  margin-bottom:2rem;
}

#hypnosis .flex .img{
  width:50%;
  display:grid;
  place-items: center;
}

#hypnosis .flex .img img{
  width:80%;
}



/*-------------------------------------------
session
-------------------------------------------*/
#session dt,#session dd{
 font-size: var(--font-md);
 padding:1.5rem;
}

#session dt{
 width:40%;
}

#session dd{
 width:60%;
}

#session .img{
 width:100%;
 text-align: center;
}




/*-------------------------------------------
スマートフォン
-------------------------------------------*/
@media screen and (max-width: 767px) {

.inner{
 width:100%;
 margin:0 auto;
}



/*-------------------------------------------
prepare(sm)
-------------------------------------------*/
#prepare{
  margin-bottom:5rem;
}

#prepare .flex{
 flex-direction: column;
}

#prepare .flex .text{
 width:100%;
}

#prepare .flex .img{
 width:100%;
 display: grid;
 place-items: center;
}

#prepare .flex .img img{
 width:50%;

}



/*-------------------------------------------
onsei
-------------------------------------------*/

#onsei .flex{
 flex-direction: column;
}

#onsei .flex .left{
 width:100%;
 padding:1rem;
}


#onsei .flex .right{
 width:100%;
 padding:1rem;
}

#onsei .flex .right .img{
 width:100%;
 height:20rem;
}



/*-------------------------------------------
work紹介(sm)
-------------------------------------------*/

#work {
margin-bottom: 5rem;
}


p{
 margin:1rem;
}

dl{
 flex-direction: column;
}

dt{
 width:100%;
}

dd{
 width:100%;
}

dd:nth-child(2){
 border-top: none;
}


/*-------------------------------------------
dowsing(sm)
-------------------------------------------*/
#dowsing {
 margin-bottom: 5rem;
}

#dowsing .flex{
 flex-direction: column-reverse;
}

#dowsing .text{
 width:100%;
}

#dowsing .img{
 width:100%;
 display:grid;
 place-items: center;
 margin-bottom: 2rem;
}

.flow{
 font-size: 0.8rem;
 border:1px solid var(--light-gold);
 padding:0.5rem;
 margin:1rem 0;
}



/*-------------------------------------------
breathe(sm)
-------------------------------------------*/
#breathe {
  margin-bottom:5rem;
}

#breathe .flex{
  flex-direction: column-reverse;
}

#breathe .flex .text{
  width:100%;
}

#breathe .flex .img{
  width:100%;
}

#breathe .flex .img img{
  width:50%;
}


/*-------------------------------------------
mindfullness(sm)
-------------------------------------------*/
 #mindfullness {
  margin-bottom: 5rem;
}

 #mindfullness .flex{
  flex-direction: column-reverse;
}

 #mindfullness .flex .text{
  width:100%;

}

 #mindfullness .flex .img{
  width:100%;
 
}

 #mindfullness .flex .img img{
  width:50%;
  
}

 #mindfullness .text2{
  margin-top:-2rem;
 
}


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

 #gazing {
  margin-bottom:5rem;
}

 #gazing  .description{
  margin-top:0;
}

 #gazing .flex{
  flex-direction: column-reverse;
  margin-bottom: 1rem;
}

 #gazing  .flex .text
 
 {
  width:100%;
  
}

 #gazing  .flex .img{
  width:100%;
  
}
 
 #gazing  .flex .img img{
  width:50%;

}

 #gazing .flex2{
  display:flex;
  flex-direction: column;
}

 #gazing .flex2 .text{
  width:100%;

}

 #gazing .flex2 .img{
  width:100%;

}

 #gazing .flex2 .img img{
  width:100%;

}


/*-------------------------------------------
hypnosis(sm)
-------------------------------------------*/

 #hypnosis {
  margin-bottom: 5rem;
}

 #hypnosis .flex{
  flex-direction: column-reverse;
}

 #hypnosis .flex .text{
  width:100%;
}

 #hypnosis .flex .img{
  width:100%;
}

 #hypnosis .flex .img img{
  width:50%;
}


/*-------------------------------------------
session
-------------------------------------------*/
#session dt,#session dd{
  font-size: var(--font-sm);
  padding:1.5rem;
}

#session dt{
 width:100%;
}

#session dd{
 width:100%;
 text-align: center;
}



}