@charset "utf-8";
/*
Theme Name: Asairo Design
Author: asairo desgin
Author URI: https://asairo.com
Description: 浅色デザインのスタイルテーマ
Version: 2021．02.27
Text Domain: asairo-design
*/

@import url('https://fonts.cdnfonts.com/css/swis721-bt');





/*--------------------------------------------------
  メインスタイル開始
--------------------------------------------------*/ 



/*--------------------------------------------------
                全サイズの基盤スタイル
--------------------------------------------------*/
/* <uniquifier>: Use a unique and descriptive class name
 <weight>: Use a value from 100 to 900 デフォで使う*/
 .noto-serif {
  font-family: "Noto Serif", "游ゴシック体", serif;
  font-optical-sizing: auto;
  font-variation-settings:
    "wdth" 100;
}

/* <uniquifier>: Use a unique and descriptive class name
 <weight>: Use a value from 200 to 900 */
.noto-serif-jp {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
}


/* <uniquifier>: Use a unique and descriptive class name
 <weight>: Use a value from 100 to 900 */
.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.swis { font-family: 'Swis721 BT', sans-serif; }
  main { position: relative; z-index: 1; }
  #main { margin: 0 auto; width: 100%; font-size: 16px; font-size: 1.6rem; }
  #content { margin: 0 auto; width: 100%; }
  .wrap { padding: 0 0%; margin: 0 auto; width: 95%; max-width: 1040px; }
  .visual { position: relative; margin: 0 auto 0; width: 100%; max-width: 2000px; }
  .visual img { width: 100%; }
  .visual h1 { padding: 0 0 0 0; text-align: center; font-size: 40px; font-size: 4.0rem; font-weight: 600; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; position: relative; z-index: 1; }
  .visual h1 span { display: block; font-size: 30%; color: #e8e3e3; position: absolute; top: 15px; left: 0; right: 0; margin: 0 auto; }

  a.btn { }
  a.h_btn:hover { background: #078755; color: #fff; }
  i img { width: initial; }


  
  /*--------------------------------------------------
  ヘッダー
  --------------------------------------------------*/
  header { z-index: 101; background: none; position: relative; }
  #nav-container {
    position: fixed;
    height: 100vh;
    width: 100%;
    pointer-events: none;
  }
  #nav-container .bg {
    position: absolute;
    top: 0px;
    right: 0;
    width: 100%;
    height: calc(100%);
    visibility: hidden;
    opacity: 0;
    transition: .3s;
    background: #000;
  }
  #nav-container:focus-within .bg {
    visibility: visible;
    opacity: .6;
  }
  #nav-container * {
    visibility: visible;
  }
  
  #nav-container .button {
    position: absolute;
    right: 25px;
    top: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    height: 40px;
    width: 40px;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background-color: #50708B;
    border-radius: 100%;
    padding: 10px;
  }
  .icon-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    transition: .3s;
  }
  .icon-bar + .icon-bar {
    margin-top: 5px;
  }
  
  #nav-container:focus-within .button {
    pointer-events: none;
    border: 1px solid #50708B;
    background-color: #fff;
  }
  #nav-container:focus-within .icon-bar { background: #50708B; }
  #nav-container:focus-within .icon-bar:nth-of-type(1) {
    transform: translate3d(0,7px,0) rotate(45deg);
  }
  #nav-container:focus-within .icon-bar:nth-of-type(2) {
    opacity: 0;
  }
  #nav-container:focus-within .icon-bar:nth-of-type(3) {
    transform: translate3d(0,-7px,0) rotate(-45deg);
  }
  
  #nav-content {
    margin-top: 70px;
    padding: 20px;
    width: 90%;
    max-width: 519px;
    position: absolute;
    top: -70px;
    right: 0;
    height: 100vh;
    background: #ececec;
    pointer-events: auto;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transform: translateX(100%);
    transition: transform .3s;
    will-change: transform;
    contain: paint;
  }
  #nav-content ul {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  #nav-content li a {
    display: block;
    text-transform: uppercase;
    transition: color .1s;
  }
  
  #nav-content li a:hover {
    color: #BF7497;
  }
  
  #nav-container:focus-within #nav-content {
    transform: none;
  }

  #nav-content .header-logo { display: block; padding: 25px 25px 57px; }
  #nav-content .reserve { display: block; background: #ADA58D; border-radius: 10px; padding: 40px; margin-bottom: 27px; text-align: center; color: #fff; font-weight: bold; font-size: 15px; }
  #nav-content .consultation { display: block; border: 1px solid #ADA58D; border-radius: 10px; padding: 13px; margin-bottom: 56px; text-align: center; color: #ADA58D; font-weight: bold; font-size: 15px; }
  #nav-content ul { padding-left: 34px; line-height: 1; }
  #nav-content ul li { margin-bottom: 27px; }
  #nav-content ul li a { font-size: 19px; font-weight: bold; }
  #nav-content ul li a.inline { display: flex; align-items: baseline; }
  #nav-content ul li a.inline i { margin-right: 6px; }
  
  
  header .copy { padding: 14px 0 11px; text-align: center; position: relative; font-size: 13px; color: #50708B; position: absolute; bottom: 15px; right: 50px; }

  
  /* ドロワー */
  /* drawerリセット */
  .drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after { background: transparent!important;}
  .drawer-hamburger-icon:before, .drawer-hamburger-icon:after { content: none!important; }
  .drawer-hamburger-icon { margin-top: 0!important;}
  .drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after { height: auto!important;}
  .drawer--right.drawer-open .drawer-hamburger { right: 50px!important;}

  header { z-index: 101; background: none; }
  header .flex { display: block; }
  header .header_logo { display: block; margin: 0 auto 10px; width: 70%; max-width: 100%; }
  header .header_contact { display: block; margin: 0 auto 10px; width: 60%; }
  header nav ul li a:hover::before { content: none; }
  nav ul { display: block; }
  .drawer--right .drawer-nav { margin-left: 0px; padding: 0px; overflow: hidden; position: fixed!important; background: #fff; width: 16.25rem; }
  .drawer-open .drawer-nav { width: 100%; max-width: 519px; }
  .drawer--right .drawer-hamburger {
    display: block !important;
    top: 35px;
    right: 35px !important;
    left: auto !important;
    background: #50708B !important;
    padding: 10px;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    position: fixed;
    box-sizing: border-box;
}
  .icon-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    transition: .3s;
  }
  .icon-bar + .icon-bar {
    margin-top: 5px;
  }
  .drawer-nav .icon-bar { background: #50708B; }
  .drawer-nav .icon-bar:nth-of-type(1) {
    -webkit-transform: translate(0px, 8px) rotate(135deg)!important; 
  }
  .drawer-nav .icon-bar:nth-of-type(2) {
    opacity: 0;
  }
  .drawer-nav .icon-bar:nth-of-type(3) {
    -webkit-transform: translate(0px, -6px) rotate(45deg); 
  }
  .drawer-open.drawer--right .drawer-hamburger { background: #fff!important; border: 1px solid #50708B; }
  .drawer-open .drawer-nav .inner {
    max-width: 250px;
    margin: 0 auto;
  }
   .drawer-nav .header-logo { display: block; padding: 74px 25px 57px; }
   .drawer-nav .reserve {
    display: block;
    background: #ADA58D;
    border-radius: 10px;
    padding: 30px 10px !important;
    margin-bottom: 27px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
}
 .drawer-nav .consultation { display: block; border: 1px solid #ADA58D; border-radius: 10px; padding: 13px; margin-bottom: 56px; text-align: center; color: #ADA58D; font-weight: bold; font-size: 15px; }
   .drawer-nav ul { padding-left: 34px; line-height: 1; }
   .drawer-nav ul li { margin-bottom: 24px; }
   .drawer-nav ul li a { font-size: 14px; font-weight: bold; }
   .drawer-nav ul li a.inline { display: flex; align-items: baseline; }
   .drawer-nav ul li a.inline i { margin-right: 6px; }
  .drawer-overlay { background-color: rgba(80, 112, 139, .6)!important; }




  .open a.toggle::before {  }

  #top #therapist .movie-block h3 {
    background: #9D923D;
    display: flex;
    align-items: center;
    width: 90%;
    padding: 15px 20px;
    translate: 0 8px;
}

  /*--------------------------------------------------
  フッター
  --------------------------------------------------*/
  footer { }
  footer #footer-inner { background: url(img/footer-bg.png) no-repeat; background-size: cover; }
  footer #footer-inner .wrap { display: flex; justify-content: space-between; align-items: flex-end; padding: 152px 0px 126px;  width:95%;}
  footer #footer-inner .sitemap {  }
  footer #footer-inner .sitemap ul li { margin-bottom: 10px; }
  footer #footer-inner .sitemap ul li a { color: #fff;
    font-weight: 400;
    font-size: 14px;}
    footer #footer-inner .footer-right {
      display: flex;
      gap: 5%;
      width: 80%;
  }
  footer #footer-inner .footer-right a {
    border: 1px solid #fff;
    color: #fff;
    border-radius: 10px;
    padding: 20px;
    font-weight: bold;
    width: 100%;
    display: block;
    text-align: center;
}

footer .copy {
  background: #50708B;
  width: 100%;
  padding: 14px 0 65px;
  text-align: center;
  position: relative;
  font-size: 13px;
  color: #fff;
}


/* ----------------------------------------
* ページトップボタン 
---------------------------------------- */
.pagetop { position: fixed; bottom: 20px; right: 20px; display: block; z-index: 999; text-decoration: none; width: 110px; }
.pagetop:hover { cursor: pointer; opacity: 0.7; }



  /*ACCORDION*/
  .acMenu dt { display:block; cursor:pointer; }
  .acMenu dd { display:none; }



  /*--------------------------------------------------
  ページの余白設定
  --------------------------------------------------*/
  /* コンテンツとコンテンツの間の余白 */
  #top { padding-top: 0%; }  /* トップページで必要なければ削除すること */
  #main section { margin-bottom: 10%; }

  /* 共通部分 */


  /*--------------------------------------------------
  見出しの設定
  --------------------------------------------------*/
  /* ページの見出し */
  h1 {}
  h2.ttl { }



  /*--------------------------------------------------
  固定ページの共通部分
  --------------------------------------------------*/
  /* 固定ページの親要素として使用する */
  #page { letter-spacing: -0.4px; }

  .table { display: table; width: 100%; }
  .table .th, .table .td { display: table-cell; }
  .left { float: left; }
  .right { float: right; }

  .text p { margin-bottom: 1em; }

  footer #map { background-color: #ADA58D; }
  footer #map .map-bg { background: #fff; border-radius: 0 0 0 450px; }
  footer #map .wrap { position: relative; padding-bottom: 444px; }
  footer #map .maps { width: 589px; height: 563px; position: relative; z-index: 2; }
  footer #map .maps iframe { width: 100%; }
  footer #map .company-about { width: 640px; padding: 90px 67px 145px 0; background: #50708B; position: absolute; top: 116px; right: 0; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; }
  footer #map .company-about h2 { width: 207px; margin-bottom: 62px; }
  footer #map .company-about .message { width: 100%; margin-bottom: 70px; color: #fff; font-size: 14px; font-style: italic; text-align: right; }
  footer #map .company-about .contact-block {}
  footer #map .company-about .add { margin-bottom: 25px; font-weight: bold; color: #fff; }
  footer #map .company-about .contact { }
  footer #map .company-about .contact a { display: block; color: #fff; font-size: 15px; }
  

  .ttlbox { position: relative; display: flex; align-items: center; }
  .ttlbox::before { content: ''; border-top: 2px solid #000; width: 170px; z-index: 0; margin-right: 16px; }


  /*--------------------------------------------------
  TOP
  --------------------------------------------------*/
  aside { position: relative; z-index: 0; }

  #top {  }
  #top #visual { position: relative; margin-bottom: 100px; }
  #top #visual .warp { position: relative; z-index: 2; }
  #top #visual h1 { position: absolute; z-index: 2; top: 50px; }
  #top #visual h1 img { width: initial; }
  #top #visual .main-visual { position: relative; z-index: 0; }
  #top #visual .main-visual .slick-slide { width: 100%; height: 100vh; }
  #top #visual .main-visual .slick-slide:nth-of-type(1) { background: url(img/main-01.png) no-repeat; background-size: cover; }
  #top #visual .main-visual .slick-slide:nth-of-type(2) { background: url(img/main-02.png) no-repeat; background-size: cover; background-position: 60%;}
  #top #visual .main-visual .slick-slide:nth-of-type(3) { background: url(img/main-03.png) no-repeat; background-size: cover; background-position: 19%;}
  #top #visual .slick-prev,
  #top #visual .slick-next { display: none!important; }
  #top #visual .floating-main { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; white-space: nowrap; }
  #top #visual .floating-main h2 { font-size: 25px; letter-spacing: 10px; margin-bottom: 10px; }
  #top #visual .floating-main .eng { font-size: 14px; font-style: italic; font-weight: 200; letter-spacing: 2px; }

#top .visual-menu {
    position: fixed;
    right: 5%;
    top: 60%;
    bottom: auto;
    z-index: 20;
}
  #top .visual-menu a { display: block; margin-bottom: 15px; color: #fff; }
  #top .visual-menu a.inline { display: inline-flex; align-items: baseline; }
  #top .visual-menu a.inline i { margin-right: 6px; }
  
.main-footer {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
}
 .main-footer a { display: inline-flex; justify-content: center; align-items: center; width: 50%; background: #9D923D; padding: 17px 0; }
 .main-footer a span { color: #fff; font-weight: bold; font-size: 15px; text-align: center; }
.main-footer a i { margin-right: 10px;}
.main-footer a:first-of-type { border-right: 1px solid #fff;}
.main-footer a:hover { opacity: 1; }
 .main-footer a:hover span,
 .main-footer a:hover i { opacity: 0.6; }
  #top #consept { position: relative;; z-index: 1; }
  #top #consept .wrap { position: relative; z-index: 2; }
#top #consept .bg {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    height: 50vw;
    z-index: 0;
}
  #top #consept .bg .bg-ocher { background: #9D923D; width: 21.8%; width: 33.6vw; }
  #top #consept .ttlbox {
    position: absolute;
    top: 0;
    left: 16vw;
    padding-top: 80px;
}
  #top #consept h2 { font-size: 28px; font-weight: bold; }
  #top #consept .bg .bg-image { background: url(img/consept-bg.png) no-repeat; background-size: cover; width: 78.2%; /*width: 51.2vw;*/ position: relative; display: inline-flex; align-items: center; }
  #top #consept .bg .bg-image .box { position: relative; left: 310px; }
  #top #consept .bg .bg-image h3 { color: #50708B; font-size: 40px; margin: 25px 0; }
  #top #consept .bg .bg-image h4 { color: #fff; font-size: 25px; margin: 25px 0 60px; }
  #top #consept .bg .bg-image p { max-width: 580px; width: 85%;}

  #top #therapist { height: 1267px; position: relative; z-index: 1; }
  #top #therapist .wrap { position: relative; padding: 0 40px;}
  #top #therapist h2 { max-width: 221px; margin-bottom: 27px; padding-top: 100px; }
  #top #therapist figure { max-width: 420px; position: absolute; top: -45px; right: 0; filter: drop-shadow(20px 20px 20px rgba(0, 0, 0, 0.16)); }
  #top #therapist .qualifications { position: absolute; top: 615px; right: 70px; display: flex; align-items: flex-end; }
  #top #therapist .qualifications ul { margin-left: 10px; }
  #top #therapist .qualifications ul li { margin-bottom: 20px; font-size: 14px; }
  #top #therapist .qualifications::before { content: ''; display: inline-block; height: 343px; width: 1px; background: #707070; }

  #top #therapist .owner-block { position: absolute; left: 400px; }
  #top #therapist .owner-block .owner { margin-bottom: 17px; font-size: 20px; color: #707070; }
  #top #therapist .owner-block h3 { margin-bottom: -5px; font-size: 35px; color: #396376; }
  #top #therapist .owner-block .eng { font-size: 13px; color: #396376; }
  #top #therapist .owner-ttl { margin: 180px 0 34px; font-size: 20px; color: #707070; }
  #top #therapist .owner-txt {
    max-width: 580px;
    line-height: 2;
    width: 48%;
}
  #top #therapist .movie-block { position: absolute; top: 780px; }
  #top #therapist .movie-block h3 {
    background: #9D923D;
    display: flex;
    align-items: center;
    max-width: 420px;
    padding: 20px 20px;
}
  #top #therapist .movie-block h3 span { color: #fff; font-weight: bold; }
  #top #therapist .movie-block h3::after { content: ''; border-top: 1px solid #fff; width: 73px; margin-left: 16px; }
  #top #therapist .movie-block .inner { width: 350px; height: 600px; margin-left: 115px; }
  #top #therapist .bgblue { background: #396376; width: 50px; height: 472px; position: absolute; top: 0; left: 0; }
  #top #problem { background: #9D923D; padding: 250px 0 0; border-radius: 0 0 281px 0; margin-bottom: 150px; position: relative; }
  #top #problem .ttlblock { display: flex; margin-bottom: 140px; }
  #top #problem .ttlblock h2 { font-size: 30px; font-weight: bold; color: #fff; }
  #top #problem .ttlblock p { margin: 0; padding: 10px 0 0 90px; font-style: italic; color: #fff; font-weight: 300; }
  #top #problem .problem-num { display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1400px; margin: 0 auto 160px; width: 95%; }
  #top #problem .problem-num li {
    width: 15%;
    max-width: 180px;
}
  #top #problem .problem-num li figure { margin-bottom: 15px; } 
  #top #problem .problem-num li span { display: block; text-align: center; color: #fff; font-weight: bold; }
  #top #problem .problem-foot {position: relative; background: url(#) no-repeat; background-position: left bottom; padding-bottom: 116px; color: #fff; line-height: 1.8; }
  .problem-foot:after {
    content: "";
    background: url(img/problem-bg.png) no-repeat;
    background-position: bottom right;
    padding-bottom: 116px;
    color: #fff;
    line-height: 1.8;
    height: 87%;
    width: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 0 170px 0 0;
    background-size: cover;
}
  
  #top #problem .problem-foot .wrap { display: flex; justify-content: flex-end; position: relative; }
  #top #problem .problem-foot .wrap .area { max-width: 470px;width: 45%; }
  #top #problem .problem-foot .wrap .area .inner { }
  #top #problem .problem-foot .wrap .area .inner .block { margin-bottom: 70px; }
  #top #problem .problem-foot .wrap .area .inner .block:last-of-type { margin-bottom: 120px; }
  #top #problem .problem-foot .wrap .area .inner .block h3 { border-bottom: 1px solid #fff; margin-bottom: 25px; padding-bottom: 10px; font-size: 15px; color: #fff; font-weight: bold; }
  #top #problem .problem-foot .wrap .area .inner .block .txt { font-size: 15px; color: #fff; }
  #top #problem .problem-foot .wrap .ring { position: absolute; top: -330px; left: -50px; animation:80s linear infinite problem-foot1; z-index: 1;}
  @keyframes problem-foot1{
    0%{ transform:rotate(0);}
    100%{ transform:rotate(360deg); }
  }
#top #problem .logo-big {
    position: absolute;
    bottom: -6%;
    left: 4%;
    opacity: 1;
    z-index: 1;
    width: 50%;
}
section#campaign img {
    width: 95%;
    margin: auto;
	    max-width: 950px;
}
  #top #campaign { background: #50708B; margin-bottom: 180px; }
  #top #campaign a { display: block; max-width: 1549px; margin: 0 auto; }
  #top #campaign a:hover { cursor: pointer; }
  #top #tellus { margin-bottom: 120px; position: relative; height:173vw; z-index: 1;}
  #top #tellus .block { position: absolute; }
#top #tellus .tellus_1 {
    background: url(img/tellus-bg1.png) no-repeat;
    background-color: #50708B;
    max-width: 1480px;
    width: 70%;
    background-size: cover;
    background-position: right;
    right: 0;
    aspect-ratio: 4 / 3;
}
 #top #tellus .tellus_2 {
    background: url(img/tellus-bg2.png) no-repeat;
    background-color: #50708B;
    width: 50%;
    background-size: cover;
    background-position: left top;
    top: 34vw;
    left: 6%;
    aspect-ratio: 1 / 1;
}
 #top #tellus .tellus_3 {
    background: url(img/tellus-bg3.png) no-repeat;
    background-color: #50708B;
    max-width: 713px;
       width: 56%;
    top: 74vw;
    right: 9%;
    aspect-ratio: 1 / 1;
    background-position: right top;
    background-size: cover;
}
#top #tellus .tellus_4 {
    background: url(img/tellus-bg4.png) no-repeat;
    background-color: #50708B;
    max-width: 1000px;
    width: 50%;
      top: 113vw;
    left: 0;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: left top;
}
#top #tellus .tellus_5 {
    max-width: 654px;
    width: 36%;
    max-height: 410px;
    height: 100%;
        top: 136vw;
    right: 5%;
}
  #top #tellus .block h2 { font-size: 30px; color: #396376; font-weight: bold; }
  #top #tellus .tellus_1 h2 { padding: 100px 0 0 110px; }
#top #tellus .tellus_1 .ring {
    width: 44%;
    animation: 80s linear infinite tellus_1;
    position: absolute;
    right: 8%;
    bottom: 5%;
}
  @keyframes tellus_1{
    /*
    0%{ transform:rotate(0);}
    100%{ transform:rotate(360deg); }
*/
  }
  #top #tellus .tellus_2 h2 { padding: 90px 0 0 110px; }
#top #tellus .tellus_2 .ring {
    width: 50%;
    animation:80s linear infinite tellus_2;
    position: absolute;
    bottom: 5%;
    left: 35%;
}
  @keyframes tellus_2{
/*    0%{ transform:rotate(0);}
    100%{ transform:rotate(360deg); }
*/  }
  #top #tellus .tellus_3 h2 { padding: 90px 0 0 90px; color: #fff; }
#top #tellus .tellus_4 h2 {
    position: absolute;
    top: 150px;
    right: -15%;
    white-space: nowrap;
}

  #top #menu { background: #F0EEE1; padding: 175px 0 223px; }
  #top #menu .ttlbox { margin: 0 0 40px -90px; }
  #top #menu .ttlbox::after { content: ''; display: block; background: url(img/menu-flower_1.png) no-repeat; width: 398px; height: 546px; background-size: 100%; position: absolute; left: -190px; }
  #top #menu .ttlbox h2 { font-size: 35px; font-weight: bold; }
  #top #menu .wrap { position: relative; }
  #top #menu .menu-inner { display: flex; justify-content: space-between; border-bottom: 1px solid #000000; padding-bottom: 100px; margin-bottom: 100px;gap: 5%; }
  #top #menu .lead { margin-bottom: 130px; }
  #top #menu .menu-inner .image-block { width: 450px; position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; }
  #top #menu .menu-inner .image-block::before { content: ''; display: block; background: url(img/menu-ring.svg) no-repeat; width: 232px; height: 232px; background-size: 100%; position: absolute; top: -80px; left: -135px; }
  #top #menu .menu-inner .image-block .menu1 { width: 100%; margin-bottom: 40px;}
  #top #menu .menu-inner .image-block .menu2,
  #top #menu .menu-inner .image-block .menu3 { width: 48%;}
  #top #menu .menu-inner .explanation-block { width: 533px; }
  #top #menu .menu-inner .explanation-block h3 { margin-bottom: 25px; font-size: 22px; font-weight: bold; color: #50708B; }
  #top #menu .menu-inner .explanation-block .txt { margin-bottom: 25px; font-size: 14px; }
  #top #menu .menu-inner .explanation-block .price { margin-bottom: 40px; }
  #top #menu .menu-inner .explanation-block .price dl { display: flex; font-size: 14px; }
  #top #menu .menu-inner .explanation-block .price dl dt { color: #9D923D; margin-right: 25px; width: 7em; }
  #top #menu .menu-inner .explanation-block .osusume-ttl { font-size: 16px; font-weight: bold; margin-bottom: 25px; }
  #top #menu .menu-inner .explanation-block ul { display: flex; flex-wrap: wrap; align-items: baseline; margin-bottom: 45px; }
  #top #menu .menu-inner .explanation-block ul li { background: #EDE7D5; padding: 5px 15px; margin: 0 20px 10px 0; font-size: 15px; font-weight: 200; }
  #top #menu .menu-inner .explanation-block .btn { border-radius: 35px; background: #ada58d; padding: 25px 120px; font-size: 16px; color: #fff; font-weight: bold; }
#top #menu #trial {
    max-width: 1648px;
    height: auto;
    margin: 0 auto;
    width: 95%;
}
  #top #menu #trial::before {  }
  #top #menu #trial .wrap { display: flex; justify-content: flex-end; }
  #top #menu #trial .left-block { width: 612px; }
  #top #menu #trial .right-block { width: 607px; position: relative; padding-top: 180px; }
  #top #menu #trial .right-block .floating { position: absolute; top: 0; right: 0; background: #9D923D; color: #fff; font-weight: bold; font-size: 26px; border-radius: 100%; padding: 50px; }
  #top #menu #trial .right-block .floating::after { content: ''; display: block; background: url(img/menu-flower_2.png) no-repeat; width: 283px; height: 360px; background-size: 100%; position: absolute; top: 0px; left: 0px; }
  #top #menu #trial .right-block h3 { padding-bottom: 20px; margin-bottom: 25px; border-bottom: 1px solid #395B75; color: #395B75; font-size: 22px; font-weight: 500; }
  #top #menu #trial .right-block .txt { margin-bottom: 80px; font-size: 15px; }
  #top #menu #trial .right-block .itudemo { font-size: 39px; color: #395B75; }


  #top #before-after { padding: 200px 0 0; margin-bottom: 170px; }
  #top #before-after .ttlbox { margin: 0 0 40px -90px; }
  #top #before-after .ttlbox h2 { font-size: 35px; font-weight: bold; }
  #top #before-after .lead { margin-bottom: 80px; }
  #top #before-after .wrap { position: relative; }
  #top #before-after .inner { display: flex; justify-content: space-between; flex-wrap: wrap; }
  #top #before-after .inner .block { width: 48%; margin: 0 0 110px; }
  #top #before-after .inner .block h3 { margin-bottom: 30px; font-size: 22px; color: #50708B; font-weight: bold; }
  #top #before-after .inner .block figure { }

  #top #voice { margin-bottom: 300px; }
  #top #voice .ttlbox { margin: 0 0 40px -90px; }
  #top #voice .ttlbox h2 { font-size: 35px; font-weight: bold; }
  #top #voice .lead { margin-bottom: 80px; }
  #top #voice .wrap { position: relative; }
  #top #voice .inner { display: flex; justify-content: space-between; flex-wrap: wrap; }
  #top #voice .inner .block { width: 48%; margin: 0 0 70px; background: #EDE7D5; border-radius: 15px; padding: 5% 3.5%; position: relative; }
  #top #voice .inner .block h3 { margin-bottom: 30px; font-size: 19px; font-weight: bold; }
  #top #voice .inner .block .txt { margin-bottom: 120px; font-size: 14px; }
  #top #voice .inner .block .menu { display: inline-block; background: #50708B; border-radius: 14px; padding: 0 14px; margin-bottom: 20px; color: #fff; font-size: 14px; }
  #top #voice .inner .block .menu-name { font-size: 17px; }
  #top #voice .inner .block .bottom { position: absolute; bottom: 50px; }

#top #reservation {
    margin-bottom: 280px;
    background: url(img/reservation-bg.png) no-repeat;
    width: 100%;
    background-size: cover;
    position: relative;
    aspect-ratio: 4 / 3;
}
#top #reservation .inner {
    position: absolute;
    top: 10%;
    right: 10%;
    background: #50708B;
    padding: 75px;
    max-width: 710px;
    width: 46%;
}
  #top #reservation .inner .txt {margin-bottom: 60px;
    color: #fff;
    font-size: 15px;
    font-weight: 100;
    line-height: 2;
    letter-spacing: 0.1rem;
}
  #top #reservation .inner .btn { display: flex; justify-content: center; }
  #top #reservation .inner .btn a {
    border: 1px solid #fff;
    border-radius: 25px;
    padding: 14px 18px;
    font-weight: 100;
    color: #fff;
    font-size: 14px;
    width: 100%;
    text-align: center;
} #top #reservation .inner .ring { animation:80s linear infinite reservation_1; position: absolute; top: -126px; left: -232px; }
  @keyframes reservation_1{
    0%{ transform:rotate(0);}
    100%{ transform:rotate(360deg); }
  }

  #top #gallery { margin-bottom: 210px; }
  #top #gallery ul { display: flex; flex-wrap: wrap; }
  #top #gallery ul li { width: 33.3%; }

/* ここから時間差フェードインアニメーション */
/* 1秒間かけてフェードイン */
.fadeIn1s {
  animation-name: fadeIn1s;
  animation-delay: 1s;
  animation-duration: 1.80s;
  animation-fill-mode: forwards;
  transform: translateY(-50px);
  opacity: 0;
}
@keyframes fadeIn1s {
  0% {
  }
  100% {
      transform: translateY(0);
      opacity: 1;
  }
}
/* 1.5秒間かけてフェードイン */
.fadeIn1500ms {
  animation-name: fadeIn1500ms;
  animation-delay: 1500ms;
  animation-duration: 1.80s;
  animation-fill-mode: forwards;
  transform: translateY(50px);
  opacity: 0;
}
@keyframes fadeIn1500ms {
  0% {
  }
  100% {
      transform: translateY(0);
      opacity: 1;
  }
}
/* 0.5秒間かけてフェードイン */
.fadeIn500ms {
  animation-name: fadeIn500ms;
  animation-delay: 500ms;
  animation-duration: 1.80s;
  animation-fill-mode: forwards;
  transform: translateX(50px);
  opacity: 0;
}
@keyframes fadeIn500ms {
  0% {
  }
  100% {
      transform: translateX(0);
      opacity: 1;
  }
}
/* 2秒間かけてフェードイン */
.fadeIn2s {
  animation-name: fadeIn2s;
  animation-delay: 2s;
  animation-duration: 1.80s;
  animation-fill-mode: forwards;
  transform: translateX(-50px);
  opacity: 0;
}
@keyframes fadeIn2s {
  0% {
  }
  100% {
      transform: translateX(0);
      opacity: 1;
  }
}

  

  
  /*--------------------------------------------------
  page
  --------------------------------------------------*/
.cover h1 { position: relative; margin: 0 auto 0; padding: 0; width: 100%; }
.cover img {  }






  /*--------------------------------------------------
  お知らせ
  --------------------------------------------------*/


  
/* アーカイブ */
  .archive { margin-top: 80px; }
  .archive .flex {  }
  .archive .wrap { max-width: 1480px; }
  .archive h1 { margin-bottom: 50px; text-align: center; font-size: 3.6rem; font-weight: bold; }
  .archive .inner { }
  .archive .inner ul { display: flex; justify-content: space-between; flex-wrap: wrap; background: #F6F8F8; padding: 45px 30px; border-radius: 20px; }
  .archive .inner ul li { width: 100%; margin: 0 0 30px 0; }
  .archive .inner ul li .cat { padding: 10px 20px; display: inline-block; background: #6A6A6A; border-radius: 5px; text-align: center; color: #fff; font-weight: bold; font-size: 1.4rem; }
  .archive .inner ul li .date { margin: 0px 35px 0 25px; font-size: 1.3rem; }
  .archive .inner ul li .title { font-size: 1.5rem; }
  .archive .inner ul li .in {  }
  .archive .inner ul li .in a { display: inline-block; border: 1px solid #707070; border-radius: 30px; padding: 10px 30px; font-size: 1.5rem; text-align: center; }
  .archive article { width: 74.3%; }
  .archive aside { width: 24%; background: #F3F3F3; padding: 40px 20px; }
  .archive aside h2 { padding: 10px; background: #0A8447; color: #fff; font-weight: bold; text-align: center; font-size: 1.7rem; }
  .archive aside h3 { border-bottom: 1px solid #707070; padding-bottom: 15px; margin: 20px 0 20px; text-align: center; font-size: 1.8rem; font-weight: bold; color: #586370; }
  .archive aside .block { margin-bottom: 40px; }
  .archive aside .block label { display: flex; align-items: center; margin-bottom: 10px; font-size: 1.5rem; color: #586370; }
  .archive aside .block label input { margin-right: .5em; }
  .archive aside .block label input[type="checkbox"] { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* リセット */
/* チェックボックスデザイン */
.archive aside .block label input[type="checkbox"] { cursor: pointer; padding-left: 30px; vertical-align: middle; position: relative; }
  .archive aside .block label input[type="checkbox"]::before,
  .archive aside .block label input[type="checkbox"]::after { content: ""; display: block; position: absolute; }
  .archive aside .block label input[type="checkbox"]::before { background-color: #fff; border-radius: 0%; border: 1px solid #707070;
width: 18px;/*チェックボックスの横幅*/
height: 18px;/*チェックボックスの縦幅*/
border-radius: 4px; transform: translateY(-50%); top: 50%; left: 5px; }
  .archive aside .block label input[type="checkbox"]::after {
border-bottom: 3px solid #707070;/*チェックの太さ*/
border-left: 3px solid #707070;/*チェックの太さ*/
opacity: 0;/*チェック前は非表示*/
height: 6px;/*チェックの高さ*/
width: 11px;/*チェックの横幅*/
transform: rotate(-45deg);
top: -6px;/*チェック時の位置調整*/
left: 9px;/*チェック時の位置調整*/
  }
  .archive aside .block label input[type="checkbox"]:checked::after {
    opacity: 1;/*チェック後表示*/
  }
  .archive aside input[type=submit] { margin: 0 auto 70px; padding: 10px 45px; background: #0A8447; font-size: 2.0rem; }
/* searchandfilter */
.searchandfilter h4 { border-bottom: 1px solid #707070; padding-bottom: 15px; margin: 20px 0 20px; text-align: center; font-size: 1.8rem; font-weight: bold; color: #586370; }
.searchandfilter ul { display: block; }
.searchandfilter li { display: block; padding: 0; }
.searchandfilter > div > ul > li { margin-bottom: 40px; }
.searchandfilter > div > ul > li:nth-of-type(1) { display: none; }
  .archive aside .searchandfilter { margin-bottom: 40px; }
  .archive aside .searchandfilter label { display: flex; align-items: center; margin-bottom: 10px; font-size: 1.5rem; color: #586370; }
  .archive aside .searchandfilter label input { margin-right: .5em; }
  .archive aside .searchandfilter label input[type="checkbox"] { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* リセット */
  /* チェックボックスデザイン */
.archive aside .searchandfilter label input[type="checkbox"] { cursor: pointer; padding-left: 30px; vertical-align: middle; position: relative; }
  .archive aside .searchandfilter label input[type="checkbox"]::before,
  .archive aside .searchandfilter label input[type="checkbox"]::after { content: ""; display: block; position: absolute; }
  .archive aside .searchandfilter label input[type="checkbox"]::before { background-color: #fff; border-radius: 0%; border: 1px solid #707070;
width: 18px;/*チェックボックスの横幅*/
height: 18px;/*チェックボックスの縦幅*/
border-radius: 4px; transform: translateY(-50%); top: 50%; left: 5px; }
  .archive aside .searchandfilter label input[type="checkbox"]::after {
border-bottom: 3px solid #707070;/*チェックの太さ*/
border-left: 3px solid #707070;/*チェックの太さ*/
opacity: 0;/*チェック前は非表示*/
height: 6px;/*チェックの高さ*/
width: 11px;/*チェックの横幅*/
transform: rotate(-45deg);
top: -6px;/*チェック時の位置調整*/
left: 9px;/*チェック時の位置調整*/
  }
  .archive aside .searchandfilter label input[type="checkbox"]:checked::after {
    opacity: 1;/*チェック後表示*/
  }





  /* パスワードページ */
.page_pass_bg { padding: 100px 0 0; margin-bottom: 100px; position: relative; z-index: 1; }
.page_pass_wrap { margin: 0 auto; max-width: 500px; padding: 50px 80px 80px; text-align: center; color: #707070; box-shadow: 0 4px 20px rgba(0,0,0,0.44); background: #fff; border-radius: 10px; }
.page_pass_ttl { font-weight: bold; font-size: 30px; }
.page_pass_site_ttl { margin: 10px auto 50px; font-size: 15px; }
.page_pass_text { display: flex; justify-content: center; }
.page_pass_input { border: 1px solid #707070; border-radius: 10px; display: block; font-size: 16px; margin-top: 20px; padding: 10px; width: 100%; }
input[type=submit].page_pass_submit { background-color: #004EA1; cursor: pointer; color: #fff; display: block; font-size: 1.5rem; margin: 20px auto; padding: 10px 0; width: 163px; height: auto; line-height: 1.8; border-radius: 10px; border:none; -webkit-appearance: none; box-shadow: none; }
.page_pass_submit:hover { opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; }
.page_pass_bg .forget { font-size: 13px; text-align: center; }



/* シングル */
  #single { margin: 80px auto 0; }
  #single .single_inner .wrap { padding: 0 20px; max-width: 800px; margin: 80px auto 100px; }
  #single h1 { margin-bottom: 25px; font-size: 2.4rem; font-weight: bold; color: #333; }
  #single .meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
  #single .meta .cat { padding: 10px 20px; display: block; background: #333; text-align: center; color: #fff; font-weight: bold; font-size: 1.6rem; }
  #single .meta .date {  }
  #single .inner { margin-bottom: 4em; }
  #single .back {  }
  #single .back .box { display: flex; justify-content: center; }
  #single .back .box .btn a { border: 1px solid #707070; background: #fff; padding: 9px 17px; font-weight: bold; font-size: 1.4rem; }
  #single .back .box .btn a:hover { border-color: #fff; background: #004EA1; color: #fff; }
  #single h2 { margin-bottom: 20px; background: #586370; padding: 15px 20px; font-family: "A-OTF Shin Go Pro"; font-size: 2.2rem; color: #fff; }
  #single img { width: auto; max-width: 100%; }
  #single .eyecatch img { width: 100%; margin-bottom: 30px; }
  #single .single_youtube iframe { width: 100%; }
  #single iframe { max-width: 100%; }
  #single .inner .text h2 { background: initial; padding: initial; color: #222; line-height: 1.875em; font-size: 1.5em; margin: 36px 0 24px; border-bottom: 2px solid; }
  #single .inner .text h3 { margin: 36px 0 24px; padding: 12px; background: #f3f3f3; border-radius: 10px; width: fit-content; font-family: "A-OTF Shin Go Pro"; }
  #single .inner .text a { color: #81c7d4; }
  #single .inner .text ul { margin: 24px 0; padding-left: 40px; list-style: initial; }
  #single .inner .text ol { margin: 24px 0; padding-left: 40px; list-style: auto; }

  .topics-sns { max-width: 1120px; margin: 0 auto; background: #F3FFE2; padding: 30px; }
  .topics-sns .h2 { text-align: center; color: #0A8447; font-size: 20px; font-weight: bold; margin-bottom: 30px; }
  .topics-sns .flex {  }
  .topics-sns .flex .box { width: 190px; height: 185px; background: #fff; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); display: flex; flex-wrap: wrap; justify-content: center; }
  .topics-sns .flex .box .img { display: grid; place-items: center; width: 100%; margin-bottom: 25px; }
  .topics-sns .flex .box .sns-ttl { font-size: 18px; text-align: center; }



/*ページネーション*/
.pagenation{ border-radius: 7px; overflow: hidden; }
.pagenation ul{ display: flex; justify-content: center; list-style-type: none; }
.pagenation .active{ background-color: #004ea2; font-size: 1.2rem; padding: 10px 15px; color: #fff; }
.pagenation a{ font-size: 1.2rem; display: block; padding: 10px 15px; text-decoration: none; color: #004ea2; background-color: #CCC; border-right: 1px solid white; }

  /* wp-pagenavi */
  .wp-pagenavi { padding: 3% 0 0%; font-size: 16px; font-size: 1.6rem; text-align:center; font-size: 26px; font-size: 2.6rem; }
  .wp-pagenavi a, .wp-pagenavi span { padding: 12px 18px; margin: 0 1%; background-color: #fff; color: #25764d; border: 1px solid #25764d; }
  .wp-pagenavi a:hover, .wp-pagenavi span.current { background-color: #25764d; color: #fff; border: 1px solid #25764d; }
  .wp-pagenavi span.pages { display: none; }
  .wp-pagenavi span.current { font-weight: normal; }
  .wp-pagenavi a.nextpostslink, .wp-pagenavi a.previouspostslink { padding: 10px 18px; font-family: "Trebuchet MS",sans-serif; }


  /* ビジュアルリッチテキストエディタ */
  #page #single .box .text h1, #page #single .box .text h2, #page #single .box .text h3,
  #page #single .box .text h4, #page #single .box .text h5, #page #single .box .text h6 {
    font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "ＭＳ ゴシック", sans-serif;
    line-height: 1.6; font-weight: bold;
  }
  #page #single .box .text h1 span, #page #single .box .text h2 span, #page #single .box .text h3 span,
  #page #single .box .text h4 span, #page #single .box .text h5 span, #page #single .box .text h6 span {
    font-weight: bold;
  }
  #page #single .box .text h1 { font-size: 30px; font-size: 3.0rem; }
  #page #single .box .text h2 { font-size: 26px; font-size: 2.6rem; }
  #page #single .box .text h3 { font-size: 22px; font-size: 2.2rem; }
  #page #single .box .text h4 { font-size: 18px; font-size: 1.8rem; }
  #page #single .box .text h5 { font-size: 14px; font-size: 1.4rem; }
  #page #single .box .text h6 { font-size: 12px; font-size: 1.2rem; }
  #page #single .box .text strong { font-weight: bold; }
  #page #single .box .text em { font-style: italic; }
  #page #single .box .text ol li { list-style-type: decimal; }
  #page #single .box .text ul li { list-style-type: disc; }
  #page #single .box .text a { text-decoration: underline; color: #009BD4; }





  /*--------------------------------------------------
  404 Not Found
  --------------------------------------------------*/
  #notfound { margin-top: 50px; }
  #notfound h1 { text-align: center; color: #a08b77; font-size: 80px; font-size: 8.0rem; }
  #notfound .txt { margin: 0 auto; width: 100%; }
  #notfound ul { padding: 2%; margin: 1.5% auto; width: 100%; background-color: #f5f5f5; }
  #notfound ul li { list-style-type: disc; margin-left: 2%; }
  .back404 { padding: 50px 0; margin: 0 auto 0px; width: 100%; }
  .back404 .btn { margin: 0 auto; width: 50%; height: 60px; line-height: 60px; text-align: center; font-size: 22px; font-size: 2.2rem; border-radius: 10px; }
  .back404 .btn a { width: 100%; height: 100%; display: block; background-color: #fff; color: #25764d; border-radius: 10px; border: 1px solid #25764d; }
  .back404 .btn a:hover { background-color: #25764d; color: #fff; }


/*scrollsnap*/
  

/* モーダル */
/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title{
	font-size:1.2rem;
	text-align: center;
	margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
	padding:0;
}






/*------------------------------------------------------------------------
                                < 1804
------------------------------------------------------------------------*/

@media screen and (max-width: 1804px) {

  

  
  
}
  




/*------------------------------------------------------------------------
                                < 1400
------------------------------------------------------------------------*/

@media screen and (max-width: 1400px) {


}
  
  
  
  

  
  
  /*------------------------------------------------------------------------
                                < 1200
------------------------------------------------------------------------*/

@media screen and (max-width: 1200px) {

  #top #consept { height: auto; }
  #top #consept .bg .bg-image { width: cover; }
  #top #consept .bg .bg-image .box { left: auto; right: 20px; }
  #top #consept .bg .bg-image { justify-content: flex-end; }
  #top #consept .bg {
    height: 60vw;
}

  #top #therapist .owner-block {
    left: 300px;
}
  
}
  
  
  
  
  /*------------------------------------------------------------------------
                                < 1060
------------------------------------------------------------------------*/

@media screen and (max-width: 1060px) {

  #top #tellus .tellus_2 { left: 0; }
  #top #tellus .tellus_3 { right: 0; }
  #top #menu #trial .right-block .floating { right: 90px; }

    #top #tellus .block h2 {
      font-size: 23px;
  }
  #top #tellus .tellus_1 h2 {
    padding: 40px 0 0 50px;
}#top #tellus .tellus_2 h2 {
  padding: 20px 0 0 30px;
}
#top #tellus .tellus_3 h2 {
  padding: 40px 0 0 50px;
  color: #fff;
}
#top #tellus .tellus_4 h2 {
  left: auto;
  right: -70px;
  top: 60px;
}

}




/*------------------------------------------------------------------------
                                < 950
------------------------------------------------------------------------*/

@media screen and (max-width: 950px) {
  #top #therapist .owner-block {
    left: 190px;
}
  

  #top #tellus .tellus_4 h2 { left: auto; right: 0; }

  #top #consept .bg {
    height: 70vw;
}
#top #therapist .owner-txt {
  width: 38%;
}
#top #therapist .qualifications {
  right: 0px;}
  #top #therapist .movie-block .inner {
    margin-left: 35px;
}

#top #problem {
  background: #9D923D;
  padding: 250px 0 0;
  border-radius: 0 0 170px 0;}
}


/*------------------------------------------------------------------------
                                < 900
------------------------------------------------------------------------*/

@media screen and (max-width: 00px) {
  #top #therapist .owner-block {
    left: 150px;
}
}

/*------------------------------------------------------------------------
                                < 800
------------------------------------------------------------------------*/

@media screen and (max-width: 800px) {

  @media screen and (max-width: 00px) {
    #top #therapist .owner-block {
      left: 80px;
  }

  

  .movie-block iframe {
    width: 250px;
    height: 470px;
}

}




/*------------------------------------------------------------------------
                                < 780
------------------------------------------------------------------------*/

@media screen and (max-width: 780px) {
	.problem-foot {
    padding-top: 125px ! Important;
}
	
	#top #visual .floating-main {
    position: absolute;
    z-index: 2;
		top: 50vh;}
	
	.second.content.fade-out02 {
    padding-top: 270vw;
    background-color: #fff;
}
  .problem-foot:after {
    display: none;
}
  
#top #problem .problem-foot .wrap .area {
  width: 100%;
}


  #top #problem .problem-foot {
    background: url(img/problem-bg.png) no-repeat;
    background-position: left bottom;
    padding-bottom: 116px;
    color: #fff;
    line-height: 1.8;
}


  .drawer--right .drawer-hamburger {
    display: block !important;
    top: 10px;
    right: 10px !important;}

  #top #therapist .owner-txt {
    width: 100%;
}
  #top #menu #trial .wrap {
    width: 100%;
}

#top #voice .ttlbox h2 {
  font-size: 28px;
  font-weight: bold;
}  #top #before-after .ttlbox h2 {
  font-size: 28px;
  font-weight: bold;
}
#top #voice .ttlbox {
  margin: 0 0 40px -140px;
}
  #top #consept .ttlbox{
    margin-top: 0px!important;
  }
  #top #consept h2 {
    color: #fff;
    font-size: 23px!important;
    padding: 0px 30px 30px!important;
}
#top #problem .ttlblock {
  display: flex;
  margin-bottom: 60px;
}
    /*--------------------------------------------------
  共通
  --------------------------------------------------*/
  /* ドロワーの装飾 */

  .alt { text-align: center; color: #192e66; font-weight: bold; }
  .alt::after { content: attr(data-label); font-size: 2rem; border-bottom: 2px solid #192e66; padding-bottom: 10px; }
  .alt img { display: none; }

  input[type=submit] { width: 100%; padding: 20px 40px; }
  #notfound h1 { font-size: 40px; font-size: 4rem; line-height: 1.2; margin-bottom: 5%; }
  #notfound ul li { list-style-type :none }
  .back404 { padding: 50px 3%; }
  .back404 .btn { width: 100%; height: 50px; line-height: 50px; }
  .open a.toggle::before { -webkit-transform: rotate(90deg)!important; transform: rotate(-45deg)!important; }

  header .header_wrap { justify-content: space-between; }

  .w50 { width: 100%!important; }

 
  .pagetop { display: none!important; }
  footer { margin: 0; }
  footer .footer_contact .wrap { width: 100%; }
  footer .footer_contact .wrap .flex { flex-wrap: wrap; }
  footer .footer_wrap { flex-wrap: wrap; padding: 10vw 0;}
  footer .footer_wrap .company { margin: 0 0 30px; }
  footer .footer_wrap .sitemap { flex-wrap: wrap; padding: 0 20px; }
  footer .footer_wrap .sitemap ul { width: 100%; }
  footer .footer_wrap .sitemap ul li { margin-bottom: 0; }

  header .header_wrap { justify-content: space-around; }
  header .header_logo { width: 30%; }
  header .header_logo a { width: 100%; }
  header .linebnr { width: 30%; }

  .drawer-nav .header-logo { padding: 40px 25px 30px;}
  .drawer-nav .reserve { padding: 35px 40px; }
  .drawer-nav .consultation { margin-bottom: 35px; }
  .drawer-nav ul li a { font-size: 14px; }
  .drawer-nav ul li a.inline i { width: 17px; }
  .drawer-nav ul li a.inline i img { width: 100%; }


  /*--------------------------------------------------
  top
  --------------------------------------------------*/

  #top #visual .visual-menu { display: none; }
  #top #consept {  }
  #top #consept .bg { flex-wrap: wrap; }
  #top #consept .bg .bg-ocher { width: 90%; position: absolute; top: 0; left: 0; z-index: 2; }
  #top #consept .ttlbox { position: static; left: 0; }
  #top #consept .ttlbox::before { content: none; }
  #top #consept h2 { color: #fff; font-size: 18px; padding: 60px 30px;}
  #top #consept .bg .bg-image h3 { padding-top: 290px; margin-top: 0; }
  #top #consept .bg .bg-image { width: 100%; background: url(img/consept-bg_sp.png) no-repeat; background-size: cover; }
  #top #consept .bg .bg-image .box { right: auto; padding: 0 20px; }
  #top #consept .bg .bg-image p { max-width: 100%; margin-bottom: 90px; }
  #top #consept .bg .bg-image h3 { font-size: 30px; }
  #top #consept .bg .bg-image h4 {font-size: 23px; }
  #top #therapist { height: auto; }
  #top #therapist .wrap { padding: 0; }
  #top #therapist h2 {
    position: absolute;
    margin: 0;
    padding: 0;
    right: 20px;
    z-index: 1;
    top: 305px;
}
  #top #therapist figure {
    width: 90%;
    position: relative;
    right: auto;
    top: 0;
    margin: 120px 0 30px;
    max-width: 250px;
}
  #top #therapist .owner-block { position: relative; left: 0; padding-left: 30px; margin-bottom: 56px; }
  #top #therapist .qualifications { position: relative; top: 0; left: 0; right: auto; padding-left: 30px; }
  #top #therapist .qualifications::before { content: none; }
  #top #therapist .qualifications ul { margin: 0; }
  #top #therapist .qualifications ul li {
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: bold;
  }
  #top #therapist .bgblue { width: 20px; top: 141.5vw; height: 810px; }
  #top #therapist .movie-block { position: relative; top: auto; }
  #top #therapist .owner-ttl {
    margin: 40px 0px 20px;
    padding-left: 30px;
    font-size: 25px;
}
#top #therapist .owner-txt {
  padding-left: 30px;
  margin-bottom: 70px;
  line-height: 2.3rem;
}
  #top #therapist .movie-block h3 { padding: 5px 30px;}
  #top #therapist .movie-block .inner { width: 70%; height: 420px; margin: 0 auto; }
  #top #therapist .movie-block .inner iframe { width: 100%; height: 100%; }
  #top #problem { margin: -140px 0 0; overflow: hidden; border-radius: 0 0 0 0; }
  #top #problem .problem-head { }
  #top #problem .ttlblock { flex-wrap: wrap; }
  #top #problem .ttlblock h2 { margin-bottom: 25px; width: 100%;font-size: 25px; }
  #top #problem .ttlblock p { padding: 0; }
  #top #problem .problem-num { padding: 0 20px; }
  #top #problem .problem-num li { width: 30%; }
  #top #problem .problem-foot { padding: 37vw 0 170px; background: url(img/problem-bg_sp.png) no-repeat; background-size: 100%; }
  #top #problem .problem-foot .wrap .area { max-width: 100%; }
  /*#top #problem .logo-big { left: -90px; width: 90%; bottom: -61vw; }*/
  #top .logo-big { position: relative;  z-index: 10;}
  #top .logo-big img {
    position: absolute;
    left: -50px;
    top: -38vw;
    width: 100%;
}

  #top #campaign {
    padding: 170px 20px;
    margin-top: 50px;
    margin-bottom: -1px;
}
  #top #campaign a {  }
  #top #tellus { height: auto; }
  #top #tellus .block { position: relative; overflow: ; }
  #top #tellus .tellus_1 {
    background: url(img/tellus-bg1_sp.png) no-repeat #50708b;
    background-size: 100%;
    height: auto;
    margin-bottom: 0px;
    aspect-ratio: 3 / 3.9;
    margin: auto;
    width: 100%;
    max-width: 500px;
}
#top #tellus .tellus_2 {
  background: url(img/tellus-bg2_sp.png) no-repeat #50708b;
  background-size: 100%;
  height: auto;
  top: auto;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 500px;
  margin: 0 auto 60px;
  z-index: 1;
}
#top #tellus .tellus_3 {
  background: url(img/tellus-bg3_sp.png) no-repeat #50708b;
  background-size: 100%;
  top: auto;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 500px;
  margin: 0 auto 60px;
}
#top #tellus .tellus_4 {
  background: url(img/tellus-bg4_sp.png) no-repeat #50708b;
  background-size: cover;
  top: auto;
  aspect-ratio: 1 / 1.1;
  width: 100%;
  max-width: 500px;
  margin: 0 auto 60px;
}
#top #tellus .tellus_5 {
  top: auto;
  right: auto;
  height: auto;
  width: 90%;
  margin: 0 auto 130px;
  max-width: 500px;
}
  #top #tellus .tellus_2 .ring { width: 60%; }
  #top #tellus .block h2 { font-size: 20px; }
  #top #tellus .tellus_1 h2 {
    padding: 45px 0 0 35px;
    color: #fff;
}
  #top #tellus .tellus_2 h2 { padding: 0; position: absolute; bottom: -40px; left: 20px; }
  #top #tellus .tellus_3 h2 { padding: 45px 0 0 26px; }
  #top #tellus .tellus_4 h2 { top: -30px; right: 30px; }
  #top #menu { padding: 85px 0 220px; overflow: hidden; }
  #top #menu .ttlbox { margin: 0px 0 40px -20px; }
  #top #menu .ttlbox::after { width: 278px; left: -90px; transform: rotate(15deg); margin-top: 40px; }
  #top #menu .lead { margin-bottom: 10px; }
  #top #menu .menu-inner { flex-wrap: wrap; }
  #top #menu .menu-inner .image-block { width: 100%; margin-bottom: 60px; }
  #top #menu .menu-inner .explanation-block { width: 100%; }
  #top #menu .menu-inner .explanation-block .txt { margin-bottom: 70px; }
  #top #menu .menu-inner .explanation-block .btn { display: block; text-align: center; }
  #top #menu #trial { height: auto;  position: relative;  }
  #top #menu #trial .wrap { position: static; }
  #top #menu #trial .right-block { position: static; width: 100%; padding-top: 60px; }
  #top #menu #trial .right-block .itudemo { margin-bottom: 120px; text-align: center; letter-spacing: 3px; font-size: 7vw; }
  #top #before-after { padding: 80px 0 0; margin-bottom: 0; }
  #top #before-after .wrap { padding: 0; }
  #top #before-after .lead { padding: 0 20px; }
  #top #before-after .inner .block { width: 49%; }
  #top #before-after .inner .block h3 { font-size: 16px; text-align: center; height: 2em; }

  #top #voice { margin-bottom: 80px; }
  #top #voice .wrap { padding: 0; }
  #top #voice .lead { padding: 0 20px; }
  #top #voice .inner .block { width: 100%; margin: 0 0 10px; border-radius: 0; }
  #top #reservation { background: url(img/reservation-bg_sp.png) no-repeat; background-size: 100%; height: 155vw; margin-bottom: 130vw; }
  #top #reservation .inner { width: 100%; max-width: 100%; top: 154.7vw; right: 0; overflow: hidden; }
  #top #reservation .inner .ring { left: auto; right: -232px; }
  #top #reservation .inner .btn a { padding: 22px 10px; width: 100%; text-align: center; }
  #top #reservation .inner .txt { font-size: 3.5vw; }
  #top #gallery ul li { width: 50%; }

  footer #map .wrap { padding: 0; }
  footer #map .maps { width: 100%; padding: 0 20px; margin-bottom: 60px; }
  footer #map .company-about {
    position: static;
    width: 100%;
    justify-content: flex-start;
    padding: 50px 30px 50px;
    margin-bottom: 100px;
}
  footer #map .company-about h2 { margin: 0 auto 60px; width: 50%; }
  footer #map .company-about .message { text-align: left; }
  footer #footer-inner { background: url(img/footer-bg_sp.png) no-repeat; background-size: cover; }
  footer #footer-inner .sitemap { display: none; }
  footer #footer-inner .wrap { justify-content: center; }
  footer #footer-inner .footer-right { display: flex; flex-wrap: wrap; justify-content: center; }
  footer #footer-inner .footer-right a:first-of-type { margin: 0 0 20px; }
  footer #footer-inner .footer-right a { width: 100%; padding: 13px 10px; text-align: center; }

  .visual-menu{
    display: none;
  }


  #top #menu #trial {
    max-width: 500px!important;
    height: auto;
    margin: 0 auto;
    width: 100%;
}
.wrap {
  padding: 0 0%;
  margin: 0 auto;
  width: 90%;
  max-width: 500px!important;
}
  
section#campaign img {
  width: 95%;
  margin: auto;
  max-width: 450px;
}

#top #consept {
  margin-bottom: 160px;
}

}


/*------------------------------------------------------------------------
                                < 700
------------------------------------------------------------------------*/

@media screen and (max-width: 700px) {
  #top #consept {
    margin-bottom: 220px;
}





  
}




/*------------------------------------------------------------------------
                                < 640
------------------------------------------------------------------------*/

@media screen and (max-width: 640px) {



  #top #consept {
    margin-bottom: 270px;
}



  
}






/*------------------------------------------------------------------------
                                < 600
------------------------------------------------------------------------*/

@media screen and (max-width: 600px) {




  #top #consept {
    margin-bottom: 360px;
}



}






/*------------------------------------------------------------------------
                                < 480
------------------------------------------------------------------------*/

@media screen and (max-width: 480px) {


  
  #top #consept {
    margin-bottom: 480px;
}



  
}




/*------------------------------------------------------------------------
                                < 370
------------------------------------------------------------------------*/

@media screen and (max-width: 370px) {


  #top #consept {
    margin-bottom: 520px;
}



  
    
  }
	
	
	
/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}

	
	
.delay-time01{
animation-delay: 0.2s;
}

.delay-time02{
animation-delay: 0.4s;
}

	
	.delay-time03{
animation-delay: 0.6s;
}

.delay-time04{
animation-delay: 0.8s;
}
	.delay-time05{
animation-delay: 0.10s;
}

.delay-time06{
animation-delay: 0.12s;
}
	.delay-time06{
animation-delay: 0.14s;
}