@charset "utf-8";

/*-------------------------------------------
top 共通設定
-------------------------------------------*/
/* Inview */
.fadein {
  opacity: 0;
  transform: translateY(200px);
  transition: all 1s;
}

.fadein.inview {
  opacity: 1;
  transform: translateY(0px);
}

/*-------------------------------------------
Mainvisual
-------------------------------------------*/

#mainvisual{
 position:relative;
 width:100%;
 min-height: 600px; /* 画像の高さを反映   img、catchphraseをabsoluteし高さが０になってしまうため*/
 margin-top:1rem;
}

/* キャッチコピー */
#mainvisual .catchphrase{

  font-family: 'Zen Old Mincho', serif;
  font-size: var(--font-xl);
  font-weight: 900;
  text-shadow: 1px 1px 2px rgba(255,255,255,100);
  
  background: rgba(0,0,0,0.25);
  padding: 0.2em 0.4em;
  border-radius: 4px;

  position: absolute;
  top: 300px;
  left: 6%;
}


#mainvisual .fade-img{
 position:absolute;
 right:50px;
 top:5rem;
 width: 800px;      /* 必須：画像の幅 */
 height: 600px;     /* 必須：画像の高さ */
 overflow: hidden;  /* 画像がはみ出さないように */
}

#mainvisual .fade-img img{
 width:100%;
 height:600px;
 object-fit:cover;
} 

#mainvisual .fade-img li {
/* 各画像を重ねる */
  position: absolute;
  inset: 0;
  opacity: 0; 
  animation: fadeSlide 20s infinite; 
}

/* 5枚の画像に順番をつける */
#mainvisual .fade-img li:nth-child(1) { animation-delay: 0s; }
#mainvisual .fade-img li:nth-child(2) { animation-delay: 5s; }
#mainvisual .fade-img li:nth-child(3) { animation-delay: 10s; }
#mainvisual .fade-img li:nth-child(4) { animation-delay: 15s; }

/* フェードアニメーション */
  @keyframes fadeSlide {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  20%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}  

/* 輪郭ぼかし */
#mainvisual .fade-img li::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  box-shadow:inset 0px 0px 20px 20px var(--white);
}



/*-------------------------------------------
About this site
-------------------------------------------*/

#about .flex{
  display:flex;
}

#about .flex .img{
  width:50%;
  padding:1rem;
  position:relative;
  background-image: url("../img/top/about.webp");
  background-size: cover;
  background-repeat: no-repeat;
}

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

/*画像ぼかし*/
#about .flex .img::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  box-shadow:inset 0px 0px 20px 20px var(--white);
}

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


/*-------------------------------------------
cause
-------------------------------------------*/

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

#cause .flex .img{
 width:60%;
 position:relative;
 display:flex;
 place-items: center;
}

#cause .flex .img img{
 box-shadow: 1px 1px 5px var(--black);
}

#cause .flex .text{
 width:40%;
 padding:0 2rem;
}


/*-------------------------------------------
explain1
-------------------------------------------*/

#explain1 .flex{
 display:flex;
}

#explain1 .flex .img{
 width:60%;
 margin-right:1rem;
}

#explain1 .flex .img img{
 box-shadow: 1px 1px 5px var(--black);
}

#explain1 .flex .text{
 width:40%;
}


/*-------------------------------------------
healing mechanism
-------------------------------------------*/

#explain2 .mechanism .flex{
 display:flex;
 flex-direction: column;
}

#explain2 .mechanism .flex .img{
 width:100%;
 padding:3rem;
}

#explain2 .mechanism .flex .img img{
 box-shadow: 1px 1px 5px var(--black);
}

#explain2 .mechanism .flex .text{
 width:100%;
 /* padding:5rem; */
}

#explain2 .improve{
 margin-top:3rem;

}


/*-------------------------------------------
ヒーリングのやり方 howtohealing
-------------------------------------------*/

#howtohealing .flex{
 display:flex;
}

#howtohealing .flex .img{
 width:60%;
 margin-right:1rem;
}

#howtohealing .flex .img img{
 box-shadow: 1px 1px 5px var(--black);
}

#howtohealing .flex .text{
 width:40%;
}

/*-------------------------------------------
healing technique
-------------------------------------------*/
#tequnique .flex{
 display:flex;
 flex-direction:row-reverse;
 align-items: center;
}

#tequnique .flex .img{
  width:50%;
  height:80vh;
  padding:1rem;
  text-align: center;
}

#tequnique .flex .img img{
  width: 100%;
  height:100%;
  object-fit:cover;
  border-radius: 50%;
  box-shadow: 1px 1px 10px var(--black);
}

#tequnique .flex .text{
  width:50%;
}


/*テーブル*/
#tequnique .list{
  width:100%;
  display:flex;
  flex-wrap: wrap;
  padding:1rem;
}

#tequnique .list dt{
  width:30%;
  background: var(--back2);
  padding:1rem 0 1rem 3rem;
  border-top:1px solid var(--black);
}

#tequnique .list dt:last-of-type{
  border-bottom:1px solid var(--black);
}

#tequnique .list dd{
  width:70%;
  padding:1rem 1rem;
  border-top:1px solid var(--black);
}


#tequnique .list dd:last-of-type{
  border-bottom:1px solid var(--black);
}

/*-------------------------------------------
対象者
-------------------------------------------*/

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

#taisyousya .flex .img{
 width:60%;
 margin-right:1rem;
}

#taisyousya .flex .img img{
 box-shadow: 1px 1px 5px var(--black);
}

#taisyousya .flex .text{
 width:40%;
}

#taisyousya .flex .text ul{
 width:80%;
 background:var(--back3);
 padding:1rem;
}

/*-------------------------------------------
voice
-------------------------------------------*/
/*精神疾患患者*/
 #voice .item1 .flex{
 display:grid;
 grid-template-columns: repeat(2,1fr);
 gap:1rem;
 padding:1rem;
 margin-bottom:3rem;
}

#voice .item1 .flex .img{
 width:100%;
}

/*一般*/
#voice .item2 .flex{
 display:grid;
 grid-template-columns: repeat(1,1fr);
 gap:1rem;
 padding:1rem;
 margin-bottom:5rem;
}

#voice .item2 .flex li{
 display:flex;
 flex-direction: reverse;
}

#voice .item2 .flex li:nth-child(even){
 flex-direction: row-reverse;
}

#voice .item2 .flex .img{
 width:20%;
 display:grid;
 place-items: center;;
}

#voice .item2 .flex .img img{
 width:50%;
 object-fit:cover;
border-radius: 50%;
}

#voice .item2 .flex .text{
 width:80%;
 border-radius:30px;
} 

#voice .item2 .flex .man{
 background: skyblue;
} 


#voice .item2 .flex .woman{
 background: pink;
} 


/*-------------------------------------------
QA
-------------------------------------------*/
#faq .faq-list{
  max-width: 1280px;
  padding: 0 30px;
  margin: 0 auto 120px;
}

#faq .faq-list .item {
  border-top:1px solid var(--dark) ;
} 

#faq .faq-list .item:last-child{
  border-bottom:1px solid var(--dark) ;
}

#faq .faq-list .item dt{
 display: flex;
 padding: 40px 0;
 position:relative;
 cursor: pointer;
 font-size: var(--font-md);
}

#faq .faq-list .item dt::before {
  content: "";
  width: 15px;
  height: 1px;
  background-color: var(--black);
  position: absolute;
  top: 55px;
  right: 0;
}

#faq .faq-list .item dt::after {
  content: "";
  width: 1px;
  height: 15px;
  background-color: var(--black);
  position: absolute;
  top: 48px;
  right: 7px;
  left:auto;
}

#faq .faq-list .item dt.active::after {
  content: none;
}

#faq .faq-list .item dt .question{
 width:30px;
 height:30px;
 color:var(--white);
 background:var(--dark);
 display:flex;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 font-size:var(font-md);
 margin-right:1rem;
}

#faq .faq-list .item dd {
 display:flex;
 padding-bottom:1rem; 
 line-height:1.8;
 font-size:var(font-md); 
}

#faq .faq-list .item dd a {
  text-decoration: underline;
}

.faq-list .item dd .answer {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: solid 1px var(--dark);
  border-radius: 50%;
  font-size: var(--font-md);
  margin-right:1rem;
}


/*-------------------------------------------
profile
-------------------------------------------*/
#profile .flex{
 display:flex;
}
#profile .flex .img{
 width:40%;
}
#profile .flex .text{
 width:60%;
 padding:1rem;
}


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


  /*-------------------------------------------
  Mainvisual(sm)
  -------------------------------------------*/

  #mainvisual{
  width:100%;
  min-height: auto; /* 画像の高さを反映   img、catchphraseをabsoluteし高さが０になってしまうため*/
  margin-top:3rem;
  
  }

  #mainvisual .fade-img{
   position:static;
   width: 100%;      /* 必須：画像の幅 */
   max-height:400px;

  }

  #mainvisual .fade-img img{
   width:100%;
   height:100%; 
   object-fit: contain;
  } 


/* 輪郭ぼかし */
#mainvisual .fade-img li::after{
  box-shadow:inset 0px 0px 20px 20px var(--white);
}

/* キャッチコピー */
#mainvisual .catchphrase{

  font-size: var(--font-md);
  font-weight: 600;
  background: rgba(0,50,50,0.25);

  width: 80%;                      /* スマホで読みやすく */
  /*left:0;                      /*センタリング
  right:0;
  margin:0 auto;                   */

  /* 中央に配置する*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  
  text-align: center;              /* 中央揃え */
  line-height: 1.6;
}
 

/*-------------------------------------------
 About this site(sm)
-------------------------------------------*/

#about{
  margin-top:0rem;
}

  #about .flex{
    flex-direction: column; /* ← 縦並び維持 */
  }

  #about .flex .img{
    width:100%;
    min-height: 450px;   /* これないと画像きえる */
    padding:1rem;
    background-image: url("../img/top/about2.webp"); /* ← スマホ用画像に切り替え */

  }

  #about .flex .text{
    width:100%;
    padding:0.25rem;
    font-size: var(--font-sm);
  }


  

/*-------------------------------------------
cause(sm)
-------------------------------------------*/

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

#cause .flex .img{
 width:100%;
 position:relative;
 display:flex;
 place-items: center;
}

#cause .flex .text{
 width:100%;
 /* padding:0; */
}

/*-------------------------------------------
explain1(sm)
-------------------------------------------*/

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

#explain1 .flex .img{
 width:100%;
 margin-right:0rem;
}

#explain1 .flex .img img{
 box-shadow: 1px 1px 5px var(--black);
}

#explain1 .flex .text{
 width:100%;
 padding:1rem;
}

/*-------------------------------------------
explain2  healing mechanism(sm)
-------------------------------------------*/

#explain2 .mechanism .flex .img{
 padding:0rem;
}

#explain2 .mechanism .flex .text{
 padding:0rem;
 margin-top:1rem;
}

#explain2 .improve{
 margin-top:2rem;
}

/*-------------------------------------------
ヒーリングのやり方 howtohealing(sm)
-------------------------------------------*/

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

#howtohealing .flex .img{
 width:100%;
 margin-right:0rem;
}

#howtohealing .flex .img img{
 box-shadow: 1px 1px 5px var(--black);
}

#howtohealing .flex .text{
 width:100%;
 padding:1rem;
}


/*-------------------------------------------
healing technique(sm)
-------------------------------------------*/
#tequnique .flex{
  flex-direction:column;
}

#tequnique .flex .img{
  width:100%;
  height:100%;
  padding:0rem;
}

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


/*テーブル*/
#tequnique .list{
  flex-direction: column;
  padding:1rem;
}

#tequnique .list dt{
  width:100%;
  padding:0.5rem 0 0.5rem 1rem;
  border-left:1px solid var(--black);
  border-right:1px solid var(--black);
}

#tequnique .list dt:last-of-type{
  border-bottom:none;
}

#tequnique .list dd{
  width:100%;
  border-left:1px solid var(--black);
  border-right:1px solid var(--black);
}


/*-------------------------------------------
対象者(sm)
-------------------------------------------*/

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

#taisyousya .flex .img{
 width:100%;
 margin-right:0rem;
}

#taisyousya .flex .text{
 width:100%;
 padding:1rem;
}

#taisyousya .flex .text ul{
 width:90%;
 background:var(--back3);
 padding:1rem;
}

/*-------------------------------------------
voice(sm)
-------------------------------------------*/
/*精神疾患患者*/
#voice .item1 .flex{
  grid-template-columns: repeat(1,1fr);
  margin-bottom:1rem;
}

/*一般*/
#voice .item2 .flex .text{
  padding:1rem;
}

#voice .item2 .flex .text .name{
  font-size: var(--font-sm);
  margin-bottom:-1rem;
}

#voice .item2 .flex .img img{
  width:100%;
}



/*-------------------------------------------
QA(sm)
-------------------------------------------*/
.faq-list{
 margin:0 auto 60px;
}
.faq-list .item{
 padding-right:20px; 
} 

/* Qの設定 */
.faq-list .item dt span{
  padding:0px 0px;
  font-size: var(--font-sm);

}
#faq .faq-list .item dt::before {
  top:45px;
  right:0px;
}
#faq .faq-list .item dt::after {
  top:38px;
  right:5px;  
}
.faq-list .item dt .question{
   margin-right:20px;
   font-size: var(--font-sm);
}

/* Aの設定 */
.faq-list .item dd{
 padding-bottom: 30px;
 font-size: var(--font-sm);
}
.faq-list .item dd .answer {
  margin-right: 20px;
}

/*-------------------------------------------
profile
-------------------------------------------*/
#profile .flex{
  flex-direction:column;
}
#profile .flex .img{
 width:100%;
}
#profile .flex .text{
 width:100%;
 padding:1rem;
}


}