/*
Theme Name: plusrei_theme
Author: Lis
Version: 1.00
*/

/*--------------------------------------------------------------
Reset
--------------------------------------------------------------*/
*,*::before,*::after{
 box-sizing: border-box
}
html{
 -moz-text-size-adjust: none;
 -webkit-text-size-adjust: none;
 text-size-adjust: none
}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{
 margin: 0
}
ul[role='list'],ol[role='list']{
 list-style: none
}
a:not([class]){
 text-decoration-skip-ink: auto;
 color: currentColor
}
input,button,textarea,select{
 font: inherit
}
:where(ul,ol){
 list-style: none
}
:where(img,svg,video,canvas,audio,iframe,embed,object){
 display: block
}
img{
 border-style: none
}
footer,
header{
 display: block
}
:where(p,h1,h2,h3,h4,h5,h6){
 overflow-wrap: break-word
}
:where(h1,h2,h3){
 line-height: calc(1em + 0.5rem)
}
ul,p,h1,h2,h3,h4,h5{
 margin: 0;
 padding: 0
}
:where(hr){
 border: none;
 border-block-start: 1px solid;
 color: inherit;
 block-size: 0;
 overflow: visible
}

/*--------------------------------------------------------------
General
--------------------------------------------------------------*/
body{
 min-height: 100vh;
 line-height: 1.6;
 color: #464646;
 font-family: "Montserrat","Noto Sans JP","Hiragino Kaku Gothic ProN", system-ui, sans-serif;
 -webkit-font-smoothing: antialiased
}
@media (max-width: 959px){
 body{
  -ms-overflow-style: none;
  scrollbar-width: none
 }
 body::-webkit-scrollbar{
  display: none
 }
}
hr {
 box-sizing: content-box;
 margin: 10px 0
}
a{
 text-decoration: none;
 background-color: transparent;
 -webkit-text-decoration-skip: objects;
 transition: .4s
}
a:active,
a:hover{
 cursor: pointer;
 color: #E0537F
}
input,textarea{
 border: solid #b4b4b4 1px
}
input:focus,
textarea:focus{
 border: solid #EFA7BE 2px;
 outline: none
}
b,
strong{
 font-weight: 700;
 font-style: normal
}
h1{
 font-weight: 700;
 font-size: 2rem;
 font-style: normal;
 margin: 1.5rem 0
}
h2{
 font-weight: 700;
 font-size: 1.5rem;
 font-style: normal;
 margin: 1rem 0
}
h3{
 font-weight: 700;
 font-size: 1.2rem;
 font-style: normal;
 margin: 0.8rem 0
}
main{
 display: block;
 width: 100%;
 padding-top:64px
}
.montserrat-<uniquifier> {
  font-family: "Montserrat","Hiragino Kaku Gothic ProN", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal
}
.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal
}
.mon-san{
 font-family: "Montserrat","Hiragino Kaku Gothic ProN", sans-serif;
 font-optical-sizing: auto;
 font-weight: <weight>;
 font-style: normal
}
.noto-san{
 font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN", sans-serif;
 font-optical-sizing: auto;
 font-weight: <weight>;
 font-style: normal
}
.fo9{
 font-size: 0.9rem
}
.fo8{
 font-size: 0.8rem
}
.b-wrapper{
 width: 100%;
 margin: 0;
 color: #464646;
 clear: both
}
.b-container{
 width: 93vw;
 height: 100%;
 margin: 0 auto;
 padding: 0
}
.fade-in{
 transition: 2s;
 opacity: 0
}
.fade-in.animated{
 opacity: 1
}
.fade-up-short{
 transform: translateY(50px);
 transition: 1.8s
}
.fade-up-short.animated{
 transform: translateY(0)
}
.fade-up-long{
 transform: translateY(90px);
 transition: 1.5s
}
.fade-up-long.animated{
 transform: translateY(0)
}
.zoom-in{
 transform: scale(0.8);
 opacity: 0;
 transition: 1.5s
}
.zoom-in.animated{
 transform: scale(1);
 opacity: 1
}
.zoom-in-large{
 animation: zoomInLarge 0.7s ease-in 0.1s forwards
}
@keyframes zoomInLarge{
  0% {
  opacity: 0;
  transform: scale(0.5);
  }
  20% {
  opacity: 0.0001;
  transform: scale(0.51);
  }
  100% {
  opacity: 1;
  transform: scale(1);
  }
}
.line{
 display: block;
 position: relative;
 margin: 4px 0;
 padding: 4px 0
}
.line::after {
 background: #b4b4b4;
 content: '';
 display: block;
 height: 1px;
 width: 0;
 transform: translateX(-50%);
 transition: 1.2s ease-in-out;
 position: absolute;
 top: 50%;
 left: 50%
}
.line.animated::after {
 width: 100%
}
.typeing{
 opacity: 0
}
.typeing.active{
 opacity: 1
}

/*--------------------------------------------------------------
Loading
--------------------------------------------------------------*/
#p-back{
 position: fixed;
 transition: all 3s;
 width: 100%;
 height: 100%;
 z-index: 999;
 background: #FCE9EF;
 text-align: center;
 color: #464646
}
#p-logo{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%)
}
#p-logo img{
 width: 200px
}
.logo-fade-up{
 animation-name: logoFadeUp;
 animation-duration: 0.2s;
 animation-fill-mode: forwards;
 opacity: 0
}
@keyframes logoFadeUp{
  from {
  opacity: 0;
  transform: translateY(200px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
}
.loaded {
 opacity: 0;
 visibility: hidden
}

/*--------------------------------------------------------------
Navi Bar
--------------------------------------------------------------*/
#nav-wrapper{
 width: 100%;
 min-height: 56px;
 background: rgba(255, 255, 255, 0.2);
 background-attachment: fixed;
 -webkit-backdrop-filter: blur(5px);
 backdrop-filter: blur(5px);
 box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08);
 border-bottom: 1px solid rgba(255, 255, 255, 0.15);
 position: fixed;
 display: block;
 z-index: 100
}
#nav-container{
 width: 93vw;
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 margin: 1rem auto;
 align-items: center
}
@media (min-width: 960px){
 .nav-menu{
   display: inline-flex;
   flex-wrap: wrap;
   width: 100%;
   height: 30px;
   font-weight: 700;
   list-style-type: none;
   gap: 20px;
   align-items: center
 }
 .nav-menu a:hover{
   color: #E0537F
 }
 .nav-menu li{
   display: flex
 }
 .nav-contact{
  display: inline-flex;
  width: 100%;
  height: 30px;
  justify-content: flex-end
 }
 .contact-button a{
  display: flex;
  width: 110px;
  min-width: 105px;
  height: 28px;
  border: 1px solid #464646;
  border-radius: 10px;
  font-weight: 700;
  background: transparent;
  align-items: center;
  justify-content: center;
  margin: 0
 }
 .contact-button a:hover{
  border-color: #E0537F;
  color: #E0537F
 }
 .for-mobile{
  display: none
 }
}
input[type="checkbox" i] {
 margin: 0
}
@media (max-width: 959px){
 .nav-menu,
 .nav-contact{
   display: none
 }
 .for-mobile{
  display: block;
  position: relative;
  width: 100%;
  height: 100%
 }  
 .nav-content {
  width: 100vw;
  height: 100%;
  min-height: 240px;
  position: fixed;
  top: 0%;
  right: 100%;
  z-index: 99;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  transition: .5s;
  text-align: center;
  padding: 15px 0 15px 40px;
  margin: 0
}
 .nav-list a{
   color: #464646
 }
 .nav-list a:hover{
   color: #E0537F
 }
 .nav-list li{
   display: flex;
   font-weight: 700;
   font-size: 1.2rem;
   list-style: none;
   margin: .5rem 0
 }
 .drawer-hidden {
   display: none
 }
 .drawer-open {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   left: 3.5vw;
   top: 50%;
   cursor: pointer
 }
 .drawer-open span,
 .drawer-open span:before,
 .drawer-open span:after {
   content: '';
   display: block;
   height: 3.5px;
   width: 25px;
   border-radius: 1px;
   background: #464646;
   transition: 0.5s;
   position: absolute
 }
 .drawer-open span:before {
   bottom: 8px
 }
 .drawer-open span:after {
   top: 8px
 }
 #drawer-input:checked ~ .drawer-open span {
   background: rgba(255, 255, 255, 0)
 }
 #drawer-input:checked ~ .drawer-open span::before {
   bottom: 0;
   transform: rotate(45deg)
 }
 #drawer-input:checked ~ .drawer-open span::after {
   top: 0;
   transform: rotate(-45deg)
 }
 #drawer-input:checked ~ .nav-content {
   left: 0;
   top: 63px
 }
}
.nav-logo{
 display: inline-flex;
 width: 100%
}
.nav-logo img{
 display: flex;
 margin: 0
}
.nav-text-change{
 color: white
}
.nav-color-change a{
 color: white;
 border-color: white 
}
.drawer-open.nav-drawer-change span,
.drawer-open.nav-drawer-change span:before,
.drawer-open.nav-drawer-change span:after {
 background: white
}

/*--------------------------------------------------------------
Header
--------------------------------------------------------------*/
.header-wrapper{
 width: 100%;
 height: calc(100vh - 64px);
 margin: 0;
 padding: 0;
 display: flex;
 position: relative;
 overflow: hidden;
 align-items: center
}
.fv-pc{
 width: 100vw;
 height: calc(100vh - 64px);
 display: block;
 object-fit: cover
}
.js-parallax{
 z-index: -1;
 position: relative
}
.header-container{
 width: 90vw;
 height: 214px;
 position: absolute;
 top: 50%;
 left: 50%;
 -ms-transform: translate(-50%,-50%);
 -webkit-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
 margin: 0;
 padding: 0
}
.header-logo{
 width: 30%;
 margin: 0 auto 1rem
}
.site-description{
 height: 4rem;
 font-size: 1.15rem;
 color: white;
 text-align: center
}
.header-socials-icon{
 display: flex;
 justify-content: center;
 margin-top: 10px;
 gap: 2rem;
 height: 35px;
 transition: all .4s;
}
.header-socials-icon img{
 display: inline-flex
}
.header-socials-icon a:hover{
 transform: rotateX(360deg)
}
@media (orientation: portrait) and (min-width: 900px) {
 .header-wrapper{
  height: calc(70vh - 64px)
 }
 .header-container{
  top: 35%
 }
}
@media (max-width: 890px){
 .header-logo{
  width: 60%
 }
}
@media (max-width: 700px){
 .js-parallax{
  left: -60%;
  top: -10%
 }
}
@media (max-width: 520px){
 .header-logo{
  width: 90%
 }
 .site-description{
  width: 314px;
  height: 6rem;
  margin: 0 auto
 }
}
@media (max-width: 450px){
 .js-parallax{
  left: -80%
 }
}
@media (max-width: 320px){
 .site-description{
  width: 90%
 }
}

/*--------------------------------------------------------------
Hero
--------------------------------------------------------------*/
.hero-container{
 display: flex;
 justify-content: space-between;
 width: 93vw;
 height: 100%;
 margin: 4rem auto
}
.hero-catch{
 width: 400px;
 height: 52px;
 font-size: 2.4rem;
 font-weight: 700;
 letter-spacing: .1rem
}
.hero-description{
 width: 45vw;
 min-width: 400px;
 margin: 10px
}
@media (max-width: 959px){
 .hero-container{
  flex-wrap: wrap;
  justify-content: center
 }
 .hero-catch{
  width: 100%;
  font-size: 2rem;
  margin-bottom:1.5rem;
  text-align: center;
  letter-spacing: 0
 }
 .hero-description{
  width: 100%;
  min-width: 95%;
  text-align: center;
  margin: 0 auto
 }
}
.hero-description p{
 margin: 0 1.3rem 1.5em
}
@media (max-width: 339px){
 .hero-catch{
  font-size: 1.5rem
 }
}

/*--------------------------------------------------------------
img-slider
--------------------------------------------------------------*/
#slider-wrapper{
 width: 100%;
 height: 280px;
 overflow: hidden;
 margin: 4rem 0 8rem;
 padding: 1rem 0;
 clear: both
}

/*--------------------------------------------------------------
News
--------------------------------------------------------------*/
#plusrei-news{
 width: 100%
}
.news-wrapper{
 width: 93vw;
 min-height: 300px;
 margin: 2rem auto 6rem;
 padding: 0;
 position: relative;
 color: #464646;
 clear: both
}
.news-container{
 width: 100%;
 height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 text-align: center
}
.news-container h1{
 height: 40px
}
.news-date{
 font-weight: 600;
 margin-right: 1rem
}
@media (max-width: 292px){
 .news-container span{
 display: block;
 margin: 2px auto
 }
}

/*--------------------------------------------------------------
Profile
--------------------------------------------------------------*/
#plusrei-profile{
 width: 100%;
 height: .001rem
}
.prof-wrapper{
 width: 100%;
 margin: 1rem 0 8rem;
 padding: 0;
 color: #464646;
 clear: both
}
.prof-container{
 display: flex;
 justify-content: space-around;
 width: 93vw;
 height: 100%;
 margin: 0 auto
}
.prof-block{
 margin: 0;
 padding: 0
}
.prof-block img{
 width: 458px;
}
.prof-text{
 margin-left: 3rem
}
.prof-text p{
 margin: 2rem 0
}
.prof-box{
 width: 93vw;
 height: 100%;
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 margin: 3rem auto;
 padding: 1rem 0;
 gap:20px
}
.prof-listbox{
 width: 100%;
 height: 360px;
 text-align: center
}
.prof-listbox img{
 margin: 0 auto
}
@media (max-width: 959px){
 .prof-container{
  flex-wrap: wrap;
  justify-content: center
 }
 .prof-block img{
  display: flex;
  max-width: 98%;
  margin: 0 auto 1rem;
 }
 .prof-text{
  width: 90%;
  margin: 0 auto
 }
 .prof-box{
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 3rem;
  gap: normal
 }
 .prof-listbox{
  width: 60%;
  margin: 4rem auto
 }
}
@media (max-width: 449px){
 .prof-text{
  width: 100%;
  margin: 0 auto
 }
}

/*--------------------------------------------------------------
Menu
--------------------------------------------------------------*/
#plusrei-menu{
 width: 100%;
 height: .001rem
}
.menu-wrapper{
 width: 100%;
 height: 100%;
 margin: 1rem 0 9rem;
 padding: 0;
 color: #464646;
 clear: both
}
.menu-wrapper h1{
 height: 40px
}
.menu-container{
 width: 95vw;
 height: 955px;
 overflow: hidden;
 margin: 0 auto
}
.menu-box{
 position: relative;
 border: 1px solid #b4b4b4;
 margin: 2rem 1rem 0;
 padding: 0
}
.menu-box img{
 object-fit: cover;
 margin: 0;
 padding: 0
}
.menu-text{
 margin: 1rem 1.3rem 2.6rem;
 font-size: .88rem
}
.menu-text p{
 margin: 1rem 0
}
.anno{
 opacity: .8
}
.menu-tag{
 border-radius: 5px;
 text-align: center;
 padding: .2rem .6rem
}
.counseling{
 background-color: #E0537F; 
 color: white
}
.healing{
 background-color: #B388D1; 
 color: white
}
.other{
 background-color: #F8D8E2; 
 letter-spacing: .1rem
}
.price-box{
 background-color: #EEEEEE;
 border-radius: 10px;
 height: 100%;
 padding: .01rem .9rem;
 margin: .8rem auto
}
.menu-link{
 position: absolute;
 right: 1.3rem;
 bottom: 1.3rem
}
@media (max-width: 959px){
 .menu-container{
  width: 100%;
 height: 980px;
 overflow: hidden
 }
 .menu-text{
  font-size: .9rem
 }
}
@media (max-width: 839px){
 .menu-container{
  height: 940px;
  overflow: hidden
 }
}
@media (max-width: 359px){
 .menu-container{
  height: 1050px;
  overflow: hidden
 }
}
@media (max-width: 306px){
 .menu-container{
  height: 1200px;
  overflow: hidden
 }
}

/*--------------------------------------------------------------
Contact
--------------------------------------------------------------*/
#plusrei-contact{
 width: 100%
}
.contact-wrapper{
 width: 100%;
 margin: 2rem 0 9rem;
 padding: 0;
 color: #464646;
 clear: both
}
.contact-wrapper h1{
 height: 40px
}
.contact-box{
 width: 93vw;
 height: 100%;
 display: grid;
 flex-wrap: wrap;
 grid-template-columns: 1fr 1fr 1fr 1fr;
 margin: 3rem auto;
 column-gap: 20px;
 row-gap: 3rem
}
.contact-listbox{
 display: inline-flex;
 flex-wrap: wrap;
 width: 100%;
 height: 100%
}
.contact-list{
 display: block
}
.contact-list img{
 display: flex
}
.contact-list .ma{
 margin: 1rem 0 .5rem
}
.contact-list .su{
 font-size: .8rem;
 line-height: 1.4
}
.inq-container{
 width: 93vw;
 height: 100%;
 display: grid;
 grid-template-columns: 1fr 1fr;
 margin: 2rem auto 1rem;
 padding: 1rem 0;
 gap: 5rem
}
.inq-boxwrap{
 display: inline-flex;
 flex-wrap: wrap;
 width: 100%;
 height: 100%;
 justify-content: center
}
.inq-box{
 display: block;
 width: 100%;
 min-width: 360px
}
.inq-box h3{
 text-align: center
}
.inq-box p{
 margin: 1rem 0
}
.xo-event-calendar table.xo-month .month-dayname td div.today {
 color: #e05380 !important
}
.wpcf7-submit{
 width: 82px;
 height: 35px;
 background-color: #464646;
 color: white;
 border: none;
 border-radius: 5px;
 font-size: .8rem;
 font-weight: 600;
 letter-spacing: .2rem;
 padding: 7px 25px;
 margin-top: 1rem;
 transition: .4s;
 cursor: pointer
}
.wpcf7-submit:hover {
 background-color: #E0537F
}
.wpcf7-form label{
 font-size: .9rem
}
.wpcf7-form input[type="checkbox" i] {
 margin-right: 2px
}
.wpcf7-list-item-label{
 font-size: .9rem
}
.wpcf7-quiz-label{
 font-size: .8rem;
 display: block
}
.wpcf7-text{
 margin-bottom: 1rem
}
.wpcf7-textarea{
 width: 98%;
 height: 40%
}
@media (max-width: 1029px){
 .contact-box{
  grid-template-columns: 224px 224px;
  grid-template-rows: 1fr 1fr;
  column-gap: 100px
 }
}
@media (max-width: 959px){
 .contact-list .ma{
  font-size: 1.1rem
 }
 .contact-list .su{
  font-size: .9rem
 }
 .inq-container{
  display: flex;
  flex-wrap: wrap;
  margin: 2.3rem auto 2rem;
  gap: 0
 }
 .inq-boxwrap{
  display: block
 }
 .inq-box{
  min-width: 98%;
  margin: 2rem 0
 }
 .wpcf7-text,.wpcf7-quiz{
  width: 80%
 }
}
@media (max-width: 639px){
 .contact-box{
  column-gap: 20px
 }
}
@media (max-width: 519px){
 .contact-box{
  grid-template-columns: 224px;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  column-gap: 0
 }
}

/*--------------------------------------------------------------
Attention
--------------------------------------------------------------*/
.attention-wrapper{
 width: 100%;
 padding: 2rem 0 4rem;
 color: #464646;
 clear: both
}
.attention-container{
 width: 93vw;
 background: linear-gradient(45deg,#B8B2F0,#FCEBF1,#EFA7BE);
 background-size: 200% 200%;
 animation: colormove 10s ease infinite;
 border-radius: 30px;
 margin: 0 auto
}
@keyframes colormove{
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}
@media (max-width: 959px){
 .attention-container{
   margin: 4rem auto
 }
}
.attention-box{
 width: 70%;
 height: 100%;
 padding: 5rem 0;
 margin: 0 auto;
 text-align: center
}
.attention-box img{
 display: block;
 margin: 0 auto
}
.attention-box p{
 font-size: .9rem;
 margin: 2rem 0
}

/*--------------------------------------------------------------
Footer
--------------------------------------------------------------*/
.footer-container{
 width: 93vw;
 display: grid;
 grid-template-columns: auto 1fr auto;
 margin: 16rem auto 2.5rem;
 align-items: center
}
.footer-logo img{
 width: 323px;
 margin: 0;
 padding: 0
}
.footer-menu{
 min-width: 470px;
 margin: 0 3rem
}
.footer-menu ul{
 display: inline-flex;
 list-style-type: none;
 gap: 20px
}
.footer-sns{
 display: inline-flex;
 margin-top: 10px;
 gap: 15px
}
.scrolltop{
 display: inline-flex;
 justify-items: end
}
.footer-logo a:hover,
.footer-sns a:hover{
 opacity: .6
}
.scrolltop a:hover{
 transform: translateY(-5px)
}
.footer-info{
 width: 93vw;
 margin: 1rem auto 6rem;
 font-size: .77rem
}
.copyright{
 margin-top: 1rem;
 float: left
}
.privacy-policy{
 margin-top: 1rem;
 float: right
}
@media (max-width: 959px){
 .footer-container{
  display: block;
  position: relative;
  margin: 10rem auto 1rem
 }
 .footer-logo img{ 
  width: 60%;
  margin: 0 auto
 }
 .footer-menu{
  min-width: 100%;
  margin: 0 auto
 }
 .footer-menu ul{
  display: none
 }
.footer-sns{
  display: flex;
  width: 50%;
  justify-content: center;
  margin: 1rem auto 0
 }
 .scrolltop{
  position: absolute;
  top: 80%;
  right: 1rem;
  z-index: 3
 }
 .copyright{
  text-align: center;
  float: none
 }
 .privacy-policy{
  text-align: center;
  float: none
 }
}

/*--------------------------------------------------------------
Reiki healing
--------------------------------------------------------------*/
.reiki-head-wrapper{
 width: 100%;
 height: calc(85vh - 64px);
 display: flex;
 position: relative;
 overflow: hidden;
 align-items: center;
 margin: 0;
 padding: 0
}
.reiki-container{
 width: 93vw;
 height: 30%;
 position: absolute;
 display: flex;
 justify-content: space-around;
 color: white;
 top: 40%;
 left: 50%;
 -ms-transform: translate(-50%,-50%);
 -webkit-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
 margin: 0;
 padding: 0
}
.title-box{
 width: 40%
}
.title-box h1{
 font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN", sans-serif;
 font-size: 2.2rem;
 font-weight: 700;
 font-style: normal
}
.intro-box{
 width: 55%;
 display: flex;
 align-items: flex-end
}
.t-reiki-wrapper{
 width: 100%;
 color: #464646;
 padding: 1rem 0;
}
.t-reiki-description-container{
 display: flex;
 justify-content: space-around;
 width: 93vw;
 height: 100%;
 margin: 2rem auto 4rem
}
.taimen-reiki-text{
 margin: 1rem 3rem 0 0
}
.taimen-reiki-text h2{
 font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN", sans-serif
}
.taimen-reiki-text p{
 margin: 2rem 0
}
.reiki-block{
 margin: 0;
 padding: 0
}
.reiki-block img{
 width: 458px
}
.set-price-wrapper{
 width: 100%;
 padding: 2rem 0 9rem;
 color: #464646
}
.set-price-wrapper h1{
 height: 40px
}
.set-price-ex{
 text-align: center
}
.set-price-container{
 display: flex;
 justify-content: center;
 width: 93vw;
 height: 100%;
 gap: 2rem;
 margin: 0 auto
}
.set-price-box{
 width: 380px;
 border: 1px solid #b4b4b4;
 border-radius: 20px;
 margin: 2rem 0 1.5rem;
 padding: 1.5rem 1rem
}
.set-price-box hr{
 color: #b4b4b4;
 margin: 1rem 0 2rem
}
.freq{
 font-size: 1.1rem
}
.price{
 font-size: 1.5rem;
 font-weight: 700;
 margin-bottom: 2rem
}
.set-attention-box{
 width: 80vw;
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 0 auto
}
.set-attention-box img{
 width: 20px;
 display: inline;
 margin-right: 10px;
 vertical-align: middle
}
.set-attention-box li{
 display: block;
 margin-bottom: .3rem
}
.reserve-button{
 width: 320px;
 display: flex;
 position: relative;
 background: #F8D8E2;
 border-radius: 10px;
 justify-content: center;
 align-items: center;
 margin: 2rem auto 0;
 padding: 2rem
}
.reserve-button span{
 font-weight: 700;
 color: #464646
}
.reserve-button img{
 max-width: 28px;
 display: inline;
 margin-left: 10px;
 vertical-align: middle
}
.reserve-button:hover{
 background: #EFA7BE;
 transition: .5s 
}
.reserve-button:hover img{
 transform: translateX(15px);
 transition: .5s 
}
#enkaku-reiki{
 width: 100%
}
.e-reiki-wrapper{
 width: 100%;
 color: #464646;
 padding: 0 0 1rem;
}
.e-reiki-description-container{
 display: flex;
 justify-content: space-around;
 width: 93vw;
 height: 100%;
 margin: 1rem auto 4rem
}
.enkaku-reiki-text{
 margin: 1rem 0 0 3rem
}
.enkaku-reiki-text h2{
 font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN", sans-serif
}
.enkaku-reiki-text p{
 margin: 2rem 0
}
@media (max-width: 959px){
 .reiki-container{
  display: block;
  height: 350px;
  top: 50%
 }
 .title-box{
  width: 95%;
  margin: 0 auto
 }
 .intro-box{
 width: 95%;
 display: block;
 margin: 2rem auto
 }
 .t-reiki-description-container,
 .e-reiki-description-container{
  display: block
 }
 .reiki-block img{
  margin: 0 auto
 }
 .taimen-reiki-text,
 .enkaku-reiki-text{
  width: 80%;
  margin: 1rem auto 3rem
 }
 .set-price-wrapper{
  width: 93vw;
  margin: 4rem auto;
  padding: 0 0 2rem
 }
 .set-price-container{
  display: block;
  width: 100%;
  gap: 0
 }
 .set-price-box{
  margin: 2rem auto 1rem;
  padding: 1.5rem 1rem
 }
 .set-attention-box{
 margin: 1.3rem auto 1rem
 }
 .set-attention-box img{
  width: 13px;
  margin-right: 3px
 }
 .reserve-button{
  margin: 2rem auto 4rem
 }
}
@media (max-width: 478px){
 .reiki-block img{
  width: 98%
 }
 .taimen-reiki-text,
 .enkaku-reiki-text{
  width: 100%
 }
 .set-price-box{
  width: 98%
 }
 .set-attention-box{
  width: 93vw
 }
 .reserve-button{
  width: 70%;
  display: flex;
  position: relative;
  background: #F8D8E2;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  padding: 1rem
 }
}

/*--------------------------------------------------------------
Reiki Course
--------------------------------------------------------------*/
#reikicourse{
 width: 100%
}
.reiki-course-wrapper{
 width: 100%;
 margin-top: 4rem;
 padding-top: 1rem;
 color: #464646
}
.reiki-course-container{
 display: flex;
 justify-content: space-between;
 width: 93vw;
 height: 100%;
 margin: 0 auto;
 gap: 30px
}
.reiki-level{
 margin: 70px auto 0;
}
.reiki-level img{
 width: 223px
}
.reiki-program-box{
 width: 60vw;
 margin-bottom: 4rem
}
.reiki-program-box h2{
 font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN", sans-serif;
 font-size: 1.2rem;
 margin-top: 70px
}
.reiki-program-box p{
 margin: 3rem 0
}
.style-deco {
 background-color: #b4b4b4;
 border: none;
 height: 1px;
 position: relative;
 &:before {
  content: '';
  background-color: #464646;
  width: 80px;
  height: 1px;
  position:absolute;
  left:0
 }
}
.set-price-box img{
 width: 53px;
 margin: 0 0 0 auto
}
@media (max-width: 959px){
 .reiki-course-container{
  display: block
 }
 .reiki-level{
  margin: 1rem auto
 }
 .reiki-program-box{
  width: 100%;
  margin-bottom: 5rem
 }
 .reiki-program-box h2{
  margin-top: 2rem
 }
}
@media (max-width: 500px){
 .reiki-level img{
  width: 100px
 }
 .style-deco {
  &:before {
  width: 100px
  }
 }
}

/*--------------------------------------------------------------
Privacy Policy
--------------------------------------------------------------*/
.privacy-head-wrapper{
 width: 100%;
 height: calc(60vh - 64px);
 margin: 0;
 padding: 0;
 position: relative;
 overflow: hidden
}
.privacy-head-container{
 width: 80%;
 height: 300px;
 color: white;
 position: absolute;
 top: 30%;
 left: 3rem;
 margin: 0;
 padding: 0
}
.privacy-wrapper{
 width: 100%;
 margin-top: 4rem;
 color: #464646
}
.privacy-title-box{
 display: flex;
 justify-content: center;
 width: 93vw;
 height: 100%;
 margin: 2rem auto;
}
.privacy-title{
 width: 70%;
 text-align: center
}
.privacy-title img{
 width: 37px;
 margin: 0 auto
}
.privacy-text{
 width: 93vw;
 margin: 0 auto;
 padding: 2rem 0
}
.privacy-text p{
 margin-bottom: 2.3rem
}
.privacy-sign-box{
 width: 93vw;
 display: flex;
 justify-content: end;
 margin: 0 auto
}
.privacy-sign{
 width: 155px
}
@media (max-width: 649px){
 .privacy-title{
  width: 100%
 }
}
@media (max-width: 409px){
 .privacy-head-container h1{
  font-size: 1.6rem
 }
}

/*--------------------------------------------------------------
404 Not Found
--------------------------------------------------------------*/
.not-found-wrapper{
 width: 93vw;
 margin: 4rem auto
}
.not-found-wrapper h1{
 text-align: center
}
@media (min-width: 960px){
 .not-found-box-pc{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 2rem auto 4rem
 }
 .not-found-box-pc img{
 width: 60%
 }
 .not-found-box-sp{
  display: none
 }
}
@media (max-width: 959px){
 .not-found-box-pc{
  display: none
 }
 .not-found-box-sp{
  width: 90%;
  height: 100%;
  display: flex;
  justify-content: center;
  margin: 2rem auto 3rem
 }
 .not-found-box-sp img{
  width: 100%
 }
}