/*
Theme Name: Twilight Healing Lab
Theme URI: http://example.com
Author: 成司
Description: Twilight Healing Lab オリジナルテーマ
Version: 1.0
*/

@charset "utf-8";


:root{

  /*color*/
  --white:#fff;
  --black:#000;
  --dark:#1f1f1f;
  --back1:#F8F8FA; /*body*/
  --back2:#BFC7D0; /*back*/
  
  --fontcolor:#0c0c0c;
  --linkcolor:#3a3c55;;
  --linkedcolor:#000e22;
  --hovercolor:rgb(3, 88, 3);

  --accent:#CBB98A; /*h2*/
  --accent2:blueviolet;
  --button:#E6D9B8;  /*button*/

  --trial:lightgreen;
  --silver:var(--back2);
  --gold:var(--accent);

  /*font-size*/
  --font-sm:1rem;
  --font-md:1.2rem;
  --font-lg:1.5rem;
  --font-xl:1.625rem;
 
}

/*************************
全体基礎設定
***************************/

html, body {
  font:100%;
  overflow-x: hidden;
}

body{
 background:var(--back1);
 font-family:'Zen kaku Gothic New',sans-serif;
 font-weight:400;
 color:var(--fontcolor);
}
 img{
  max-width:100%;
  vertical-align:bottom;
 }


li{
 list-style:none;
}

p{
  font-size:var(--font-md);
  padding:var(--font-md);
}

/* 普通のリンク */
a{
  text-decoration:none;
  color:var(--linkcolor);
  transition:all 0.2s ease;
}

a:hover{
 filter:brightness(1.5);
 color:green;
}

a.btn:hover {
  filter: none;
  color:black;
}


/* 注目のリンク */
a.atten{
    color:red;
    text-decoration: underline;
}



/*ボタン設定*/
.btn{
  width:250px;
  padding:1rem 1.5rem;
  border:1px solid black; 
  position:relative;
  /* 中央寄せ */
  display:block;
  margin:5rem auto;
  text-align: center;
  border-radius:5px;
  background-color: var(--back2);
  overflow: hidden;
  color:black;
 }

 .btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  z-index:10;
  background-color:gray;
  width:100%;
  height:100%;
  opacity:0.3;
  transition:0.5s;
 }

 .btn:hover::before{
   left:0;
 }


iframe {
  vertical-align: bottom;
}




/* ページヘッダー下テキスト */
/* .head-text {
  font-size: var(--font-md);
  line-height: 2;
  padding: 0 20px;
  margin-bottom: 80px;
  text-align: center;
} */



 /* h2 セクションタイトル設定*/
h2 {
  color: var(--accent);
  margin-bottom:2rem;
  text-shadow: 1px 1px 1px black;;
}

h2 span img{
  width:50px;
  height:auto;
}

h2 span.lg{
  display:flex;
  align-items: center;
  font-family:'Dancing Script',serif;
  /* font-family: 'Zen Old Mincho', serif; */
  font-size: clamp(1.5rem, 1.8rem, 2rem);
  letter-spacing: 0.05em;
  font-weight: 700;
}

h2 span.sm{
  display:block;
  margin-left:50px;
  font-size:var(--font-sm);
}

 /* h3 セクションタイトル設定*/

h3{
  font-size: var(--font-lg);
  font-weight: 600;
  position: relative;
  padding-left:2rem;
  color: var(--dark);
  letter-spacing: 0.1em;
  margin-top:1rem;
  border-bottom: 3px solid black;
  margin-bottom:1rem;
}


h3::before{
  content: "";
  position: absolute;
  left: 0.5rem;
  top:0.5rem;
  bottom:0;
  right:0;
  width: 1rem;
  height: 1rem;
  background:none;
  border-top:5px double var(--black);
  border-bottom:5px double var(--black);
  border-right:1px solid var(--black);
  border-left:1px solid var(--black);
  transform: rotate(45deg);
}


main{
  padding:2rem;
}

section{
  width:100%;
  margin-top:10rem;
}





.column-title{
  color:var(--accent2);
  font-weight:500;
  font-size:var(--font-lg);
  margin-bottom:-1rem;
}

.description{
  padding:1rem;
  line-height:1.7;
}

/* 会員用コーズ色 */
.trial{
 background-color: var(--trial);
}
.silver{
 background-color: var(--silver);
}
.gold{
 background-color: var(--gold);
}


/* php用 */
/* パンくずリスト */
ul.bread {
   margin-bottom:3rem;
}
ul.bread a{
   color:var(--black);
}


/*フォーム関係*/
/* wp-membership用などのフォーム用 */

input,
textarea{
 width:80%;
 background-color:var(--back2);
 color:black;
 font-size:var(--font-md);
 padding:0.3rem 0.5rem;
 margin:1rem 2rem;
 border-radius: 5px;
}

/* 送信ボタン */
.form_btn{
    text-align:center;
}

input[type="submit"]{
    background-color: var(--back2);
    width:30%;
    padding:1rem 2rem;
}

button[type="submit"]{
    background-color: var(--accent);
}


/*wp-pagenavi ページネーション*/
.wp-pagenavi {
  /* clear: both; */
  text-align:center;
  margin:3rem 0;
}

.wp-pagenavi a, .wp-pagenavi span {
  color: #000;
  background-color: var(--back2);
  border: solid 1px var(--black);
  padding: 8px 15px;
  margin: 0 2px;
  /* white-space: nowrap;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px; */
  border-radius: 3px;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  text-align: center;
}

.wp-pagenavi span.current{
  color: #000;
  background-color: var(--gold);
  border-color: #66cccc;
  font-weight: bold;
    } 



/*-------------------------------------------
Header（PC）
-------------------------------------------*/

#header {
  width: 100%;
  max-width:100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--back2);
  padding: 0 1rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index:10;
}


#header .logo {
  width: 100%;
  max-width: 220px;
  line-height: 0;
}

#header .logo a {
  display: block;
}

#header .navi .menu {
  display: flex;
  align-items: center;
  font-size: var(--font-sm);
}

#header .navi .menu > li {
  padding:0 1rem;
  margin-left: 5px;
  width:auto;

}

#header .navi .menu .menu-first{
  position:relative;
}

#header .navi .menu .menu-first{
  cursor:pointer;
}

/*下矢印*/
#header .navi .menu .menu-first::after{
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  left:0;          /*センタリング*/
  right:0;         /*センタリング*/
  margin:0 auto;   /*センタリング*/
  top:20px;
  border-left:1px solid var(--fontcolor);
  border-bottom:1px solid var(--fontcolor);
  transform:rotate(-45deg);
}

#header .navi .menu .menu-first .menu-second {
  width:250px;
  background-color:var(--back1);
  border:1px solid var(--black);
  padding:10px;
  position:absolute;
  left:0;
  top:35px;
  display:none;
}

#header .navi .menu .menu-first .menu-second li{
  margin-bottom: 10px;
}


#header .navi .menu .menu-contact a{
 display:block;
 background:var(--button);
 padding:10px 30px;
 border-radius:20px;
 font-weight:500;
 text-align:center;
}


/*-------------------------------------------
Footer
-------------------------------------------*/
/*全体*/
#footer{
 display:flex;
 width: 100%;
 
}

/*左サイド*/
#footer .info-area{
 width:30%;
 background:var(--back2);
 padding:1rem;
 
}

#footer .info-area p{
 font-size:var(--font-sm);
}

/*右サイド*/
#footer .menu-area{
 width:70%;
 display:flex;
 justify-content:space-between;
 padding:2rem;
 background:var(--black);
 color:var(--white);
}

#footer .menu-area a{
color:var(--white);
}

#footer .menu-area .menu-col .menu-title {
  font-size: var(--font-md);
  font-weight: 500;
  margin-bottom: 30px;
} 



/*-------------------------------------------
タブレット
-------------------------------------------*/
@media screen and (max-width: 1024px) {
  html {
    scroll-padding-top: 60px;
  }

main{
  padding:1rem;
}

section{
  margin-top:10rem;
}

  /*-------------------------------------------
  Header
  -------------------------------------------*/

 #header {
    height: 60px;
  
  }
  #header .logo {
    max-width: 180px;
  }

#header .navi {
    width: 80%;
    height: 100vh;
    color:var(--fontcolor1);
    position: fixed;
    top: 0;
    left: -120%;
    z-index: 5;
    transition: all 0.6s;
  }

  /*スライド後*/
  #header .navi.active {
    left: 10%;
  }

  #header .navi .menu {
    width:100%;
    height:100vh;
    flex-direction: column;
    background:none;
    padding:60px;
  }

  #header .navi .menu >li{
    width:500px;
    background:white;
    border-top:1px solid var(--black);
    padding:1rem;
  }

  
  #header .navi .menu > li a {
    width: 100%;
    display: block;
    padding: 5px;
  }

  /*下矢印消去*/
  #header .navi .menu .menu-first::after{
  border-left:none;
  border-bottom:none;
  }


   #header .navi .menu .menu-first span {
    display: block;
    padding: 5px 10px;
  
  }

   /* 十字 */
   #header .navi .menu .menu-first span::before {
    content: "";
    width: 15px;
    height: 1px;
    background-color: var(--black);
    position: absolute;
    top: 30px;
    right: 20px;
  }

  #header .navi .menu .menu-first span::after {
    content: "";
    width: 1px;
    height: 15px;
    background-color:var(--black);
    position: absolute;
    top: 23px;
    right: 26px;
    left: auto;
  }

  #header .navi .menu .menu-first span.active::after {
    content:none;
  }

  #header .navi .menu .menu-first .menu-second {
    width: 100%;
    position: static;       /*staticにしないとアコーディオン動かない*/
    padding: 0 0 0 40px;
    border:none;
  }

  #header .navi .menu .menu-first .menu-second li {
    width:100%;
    /* background-color:pink; */
    border-top: solid 1px var(--white);
    margin-bottom: 0;
  }

  /*問い合わせボタン*/
   
  #header .navi .menu .menu-contact {
    padding: 30px 0;
  }
  #header .navi .menu .menu-contact a {
    max-width: 160px;
    margin: 0 auto;
  }

  /*hambergerボタン*/

  #header .humberger{
    width:50px;
    height:50px;
    background:var(--button);
    position:fixed;
    top:0rem;
    right:1rem;
    z-index:100;
    cursor: pointer;
    border-radius:10px;
    box-shadow: 2px 2px 3px 1px rgba(100,100,100,0.8);
  }

  #header .humberger span{
   display:block;
   width:40px;
   height:3px;
   background:rgba(100,100,100,0.4);
   position:absolute;
   left:5px;
   transition: all 0.4s ease;
  }

  #header .humberger span:nth-of-type(1){
    top:15px;
  }

  #header .humberger span:nth-of-type(2){
    top:25px;
  }

  #header .humberger span:nth-of-type(3){
    top:35px;
  }


  #header .humberger.active span:nth-of-type(1){
    top:25px;
    transform:rotate(45deg);
  }

  #header .humberger.active span:nth-of-type(2){
    top:25px;
    display:none;
  }

  #header .humberger.active span:nth-of-type(3){
    top:25px;
    transform:rotate(-45deg);
  }

  /*mask*/

  #header .mask{
   position:fixed;
   top:0;
   left:0;
   z-index:1;
   opacity:0;
   display:none;
   transition: all 2s;
  }
  
  #header .mask.active{
   width:100%;
   height:100vh;
   background:rgba(100,250,250,0.4);
   display:block;
   opacity:100;
  }

}
/*-------------------------------------------
スマートフォン
-------------------------------------------*/
@media screen and (max-width: 767px) {
  /* .pc {
    display: none;
  } */
  /* ページヘッダー部 */



 
  /* ページヘッダー下テキスト */
  /* .head-text {
    margin-bottom: 40px;
  } */

 section{
  width:100%;
  margin-top:2rem;
}


 
  /*H2 セクションタイトル*/

  .section-title {
   margin-bottom:1rem;
  }

  .section-title span.lg{
    font-size: var(--font-lg);
  }
  .section-title span.sm{
    display:block;
    margin-left:50px;
    font-size:var(--font-sm);
  }

  h3{
  font-size: var(--font-md);
  font-weight: 500;
  letter-spacing: 0.1em;
  border-bottom: 2px solid black;
 }

  h3::before{
  width: 0.8rem;
  height: 0.8rem;
 }

  .column-title{
    font-weight:500;
    font-size:var(--font-md);
    margin-bottom:1rem;
  }
  .description{
    line-height:1.5;
    font-size:var(--font-sm);
    padding:0.5rem ;
  } 

  /*-------------------------------------------
  Footer
  -------------------------------------------*/

  #footer{
    flex-direction: column-reverse;
  }

  #footer .info-area{
    width:100%;
    text-align:center;
  }

  #footer .menu-area{
    width:100%;
  }

}