@charset "UTF-8";

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

/* Inview */
.fadein {
  opacity: 0;
  transform: translateY(200px);
  transition: all 1s;
}
.fadein.inview {
  opacity: 1;
  transform: translateY(0);
}

/*-------------------------------------------
Mainvisual
-------------------------------------------*/
.mainvisual {
  height: 600px;
  margin-bottom: 5rem;
  position: relative;
}
.mainvisual .fade-img img {
  width: 100%;
  height: 600px;
  object-fit: cover;
}

.mainvisual .fade-img li {
  width: 70%;
  position: absolute;
  right: 0;
  opacity: 0;
  animation: fade 15s infinite;
}

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

.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;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.mainvisual .catchphrase {
  font-family: 'Zen Old Mincho', serif;
  font-size: var(--font-xl);
  text-shadow: 1px 1px 3px var(--white);
  position: absolute;
  top: 210px;
  left: 6%;
}

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

#about .flex{
  display:flex;
  margin-bottom:5rem;
}

#about .flex .img{
 width:50%;
 position:relative;
 margin-right:1rem;
}

#about .flex .img img{
 width:100%;
 height:500px;
 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(--black);
}

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

#about .flex:nth-child(3){
  flex-direction: row-reverse;
  margin-bottom:5rem;
}

#about .flex:nth-child(3) .img img{
 width:100%;
 height:500px;
 object-fit:contain;
}

/*-------------------------------------------
healing　Features 
-------------------------------------------*/

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

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

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

#features .flex .text{
 padding:0.5rem;
}

#features .flex .text .column-title{
  color:var(--light-gold);
  font-weight:500;
  font-size:var(--font-lg);
  margin-bottom:1rem;
}


/*-------------------------------------------
healing technic
-------------------------------------------*/

#tecknicue .flex{
 display:flex;
 flex-direction:row-reverse;
 align-items: center;
 margin-bottom:3rem;
}

#tecknicue .flex .img{
 width:50%;
 height:90vh;
}

#tecknicue .flex .img img{
 width:80%;
 height:80%;
 object-fit:cover;
 border-radius: 50% ;
 margin-left:3rem;
}

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

#tecknicue  .list{
  display:flex;
  flex-wrap:wrap;
  padding:0 1rem;
  margin-bottom:5rem;
}

#tecknicue  .list dt{
 width:30%;
 background-color:#757562;
 padding:1rem 0 1rem 3rem;
 border-top:2px solid var(--gold);
}

#tecknicue .list dt:last-of-type{
 border-bottom:2px solid var(--gold);
}

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

#tecknicue  .list dd{
 border-bottom:1px solid var(--white);
}


/*-------------------------------------------
healing effect
-------------------------------------------*/

/*上段*/
#effect .flex{
 display:flex;
 flex-direction:row;
 align-items: center;
 margin-bottom:3rem;
}

#effect .flex .img{
 width:50%;
 height:60vh;
 position:relative;
}

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

#effect .flex .img img{
 width:100%;
 height:100%;
 object-fit:cover;
 margin-right:3rem;
}

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

/*下段*/
#effect .flex2{
 display:flex;
 flex-direction:row;
}

#effect .flex2 .left{
 width:50%;
 padding:1rem;
}

#effect .flex2 .right{
 width:50%;
 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%;
}


/*-------------------------------------------
QA
-------------------------------------------*/

.faq-list {
  max-width: 1280px;
  padding: 0 20px;
  margin: 0 auto 120px;
}
.faq-list .item {
  border-top: solid 1px var(--dark);
}
.faq-list .item:last-child {
  border-bottom: solid 1px var(--dark);
}
.faq-list .item dt {
  display: flex;
  cursor: pointer;
  font-size: var(--font-md);
  line-height: 1.8;
  padding: 40px 0;
  position: relative;
}
.faq-list .item dt::before {
  content: "";
  width: 15px;
  height: 1px;
  background-color: var(--white);
  position: absolute;
  top: 55px;
  right: 0;
}
.faq-list .item dt::after {
  content: "";
  width: 1px;
  height: 15px;
  background-color: var(--white);
  position: absolute;
  top: 48px;
  right: 6px;
  left: auto;
}
.faq-list .item dt.active::after {
  content: none;
}
.faq-list .item dt .question {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: var(--dark);
  border-radius: 50%;
  color: var(--white);
  font-size: var(--font-md);
  margin-right: 100px;
}
.faq-list .item dd {
  display: flex;
  font-size: var(--font-md);
  padding-bottom: 40px;
  line-height: 1.8;
}

.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: 100px;
}


/*-------------------------------------------
profile
-------------------------------------------*/

#profile .flex{
  display:flex;
}

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

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



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


  /*-------------------------------------------
  Mainvisual(sm)
  -------------------------------------------*/
  .mainvisual {
    height: 400px;
    margin-bottom: 60px;
  }

  .mainvisual .fade-img img {
    height: 400px;
  }

  .mainvisual .fade-img li {
    width: 100%;
  }

  .mainvisual .catchphrase {
    color: var(--light-goldopa);
    text-shadow: 2px 2px 1px var(--black);
    font-size: var(--font-lg);
    top: 50px;
    left: 6%;
  }

/*-------------------------------------------
 About this site(sm)
-------------------------------------------*/
#about .flex,#about .flex:nth-child(3){
  flex-direction: column;
  margin-bottom:0rem;
}

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

#about .flex .img img{
 height:250px;
 object-fit:cover;
}

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

#about .flex:nth-child(3) .img img{
 height:300px;

}


/*-------------------------------------------
healing　Features(sm)
-------------------------------------------*/

#features .flex{
  display:flex;
  flex-direction: column;
}

#features .flex .img{
  height:15rem;
}

#features .flex .text{
 padding:0.5rem;
}

#features .flex .text .column-title{
  font-size:var(--font-md);
  margin-bottom:0.5rem;
}



/*-------------------------------------------
healing technic(sm)
-------------------------------------------*/

#tecknicue .flex{
 flex-direction:column;
 margin-bottom:2.5rem;
}

#tecknicue .flex .img{
 width:100%;
 height:150px;
}

#tecknicue .flex .img img{
 width:100%;
 height:100%;
 border-radius:0%;
 margin-left:0rem;
}

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


/*リスト部*/
#tecknicue  .list{
  display:flex;
  flex-direction:column;
  padding:0 0.5rem;
  margin-bottom:2rem;
}

#tecknicue  .list dt{
 width:100%;
 padding:0.5rem 0 0.5rem 2rem;
 border-top:1px solid var(--white);
}

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

#tecknicue  .list dd{
 width:100%;
 padding:1rem 1rem;
}



/*-------------------------------------------
healing effect(sm)
-------------------------------------------*/

/*上段*/
#effect .flex{
 flex-direction:column;
 margin-bottom:1.5rem;
}

#effect .flex .img{
 width:100%;
 height:40vh;
}

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

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

/*下段*/
#effect .flex2{
 flex-direction:column;
}

#effect .flex2 .left {
 width:100%;
 padding:0.5rem;
 font-size: var(--font-sm);
}

#effect .flex2 .right{
 width:100%;
 padding:0.5rem;
 font-size: var(--font-sm);
}



/*-------------------------------------------
voice(sm)
-------------------------------------------*/

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


/*一般*/
#voice .item2 .flex{
 margin-bottom:2rem;
}

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

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


/*-------------------------------------------
QA(sm)
-------------------------------------------*/

.faq-list{
 margin:0 auto 60px;
}

.faq-list .item{
 padding-right:20px;
}


/* Qの設定 */
.faq-list .item dt{
  padding:30px 0px;
}

.faq-list .item dt::before{
  top:45px;
  right:-20px;
}

.faq-list .item dt::after{
  top:38px;
  right:-14px;  
}

.faq-list .item dt .question{
   margin-right:20px;
}


/* Aの設定 */

.faq-list .item dd{
 padding-bottom: 30px;
}

.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;
}



}