@charset "UTF-8";
/*
font-bold=200,300,400,500
font-family: 'Noto Serif JP', serif;

font-bold=300,400,500
font-family: 'M PLUS Rounded 1c', sans-serif;
*/
/*////////////////////////　サイト共通　////////////////////////*/
/*サイト共通のレイアウトCSSです*/
* {
 font-family: "MS Pゴシック", sans-serif;
 font-size: 16px;
 line-height: 160%;
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 color: #333;
}
ul {
 padding: 0;
 list-style-type: none;
}
body {
 margin: 0;
 padding: 0;
 background: #007bbb;
}
a {
 text-decoration: none;
}
a:hover {
 opacity: 0.75;
 transition: 0.3s;
}
h2 {
 font-family: 'Noto Serif JP', serif;
 font-weight: 200;
 font-size: 32px;
 margin: 0 0 30px 0;
}
.catch-txt {
 font-family: 'Noto Serif JP', serif;
 font-weight: 200;
 color: #007bbb;
 font-size: 24px;
 margin: 0 0 20px 0;
}
.lead-txt {
 margin: 0 0 20px 0;
}
.lead-txt p+p {
 margin: 10px 0 0 0;
}
.fs14 {
 font-size: 14px;
}
.mb10 {
 margin-bottom: 10px;
}
.mb20 {
 margin-bottom: 20px;
}
.pc-none {
 display: none;
}

@media screen and (max-width:750px) {
.pc-none {
 display: inherit;
}
.sp-none {
 display: none;
}
.catch-txt {
 line-height: 140%;
}
}
/*-------------------------------------------------
 header
-------------------------------------------------*/
header {
 width: 100%;
 max-width: 1000px;
 margin: 0 auto;
 position: relative;
}
header nav {
 width: 250px;
 position: absolute;
 top: 0;
 left: 0;
}
header nav .main-nav {
 background: #FFF;
 box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
 border-radius: 0 0 10px 10px;
}
header nav .main-nav li a {
 display: block;
 font-family: 'Noto Serif JP', serif;
 font-weight: 500;
 color: #FFF;
 font-size: 18px;
}
header nav .main-nav li {
 text-align: center;
}
header nav .main-nav li a {
 border-bottom: 1px dotted #FFF;
 background: #82cddd;
 padding: 7px 20px 10px 20px;
}
header nav .main-nav li.active a {
 background: #00afcc;
}
header nav .main-nav li:last-child a {
 border-bottom: none;
 border-radius: 0 0 10px 10px;
 padding: 7px 20px 15px 20px;
}
header nav .main-nav li.logo a {
 text-indent: -9999px;
 width: 100%;
 height: 120px;
 background: #82cddd url(../img/logo.png) no-repeat bottom center;
 display: block;
 padding: 7px 10px 10px 10px;
}
/*サブナビ*/
header nav .sub-nav {
 background: #FFF;
 box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
 border-radius: 10px;
 margin: 20px 0 0 0;
}
header nav .sub-nav li {
 text-align: center;
}
header nav .sub-nav li a {
 display: block;
 font-family: 'Noto Serif JP', serif;
 font-weight: 500;
 color: #FFF;
 font-size: 18px;
 border-bottom: 1px dotted #FFF;
 background: #00afcc;
 padding: 7px 20px 10px 20px;
}
header nav .sub-nav li.active a {
 background: #82cddd;
}
header nav .sub-nav li:first-child a {
 border-radius: 10px 10px 0 0;
 padding: 15px 20px 10px 20px;
}
header nav .sub-nav li:last-child a {
 border-bottom: none;
 border-radius: 0 0 10px 10px;
 padding: 7px 20px 15px 20px;
}
/*バナー*/
header nav .ban-box li.online-shop a {
 font-family: 'Noto Serif JP', serif;
 background: #f8b62d;
 line-height: 80px;
 display: block;
 font-size: 18px;
 cursor: pointer;
 text-decoration: none;
 color: #FFF;
 text-align: center;
 margin: 20px 0 0 0;
}
header nav .ban-box li.online-shop a i {
 color: #FFF;
}
nav.nav-sp {
 display: none;
}
header .head-nav {
 padding: 10px 0;
 position: absolute;
 top: 0;
 right: 0;
}
header .head-nav li {
 display: inline-block;
}
header .head-nav li+li {
 margin: 0 0 0 10px;
}
header .head-nav li a {
 font-family: 'M PLUS Rounded 1c', sans-serif;
 font-size: 16px;
 font-weight: 500;
 display: block;
 margin: 0 20px 0 0;
 color: #007bbb;
}
header .head-nav li a::before {
 font-family: "Font Awesome 5 Free";
 content: "\f0da";
 font-weight: bold;
 margin: 0 10px 0 0;
}

@media screen and (max-width:750px) {
header {
 max-width: none;
 justify-content: space-between;
 background: url(../img/bg.jpg);
}
 header .head-nav {
  position: inherit;
  text-align: right;
 }
 header .head-nav li a {
 font-size: 14px;
 margin: 0 10px 0 0;
}
nav.nav-sp {
 display: inherit;
}
nav.nav-pc {
 display: none;
}
}
/*-------------------------------------------------
content-wrap
-------------------------------------------------*/
.content-wrap {
 display: flex;
 background: url("../img/bg.jpg");
}

@media screen and (max-width:750px) {
.content-wrap {
 display: inherit;
 margin: -1px 0 0 0;
}
}
/*-------------------------------------------------
main
-------------------------------------------------*/
main {
 width: 100%;
 max-width: 1000px;
 margin: 0 auto;
 padding: 70px 20px 100px 270px;
 background: url("../img/detail-bg.png") no-repeat top 50px right;
}
/* パンくず（pankuzu）*/
.pankuzu {
 width: 100%;
 max-width: 1000px;
 margin: 0 auto 20px auto;
}
.pankuzu li {
 display: inline-block;
}
.pankuzu li::before {
 content: "";
 font-size: 10px;
 margin: 0 3px 0 5px;
 width: 7px;
 height: 12px;
 background: url(../img/pankuzu.png) no-repeat bottom left;
 display: inline-block;
}
.pankuzu li:first-child::before {
 content: none;
}
.pankuzu li a, .pankuzu li h1 {
 display: inline;
 font-size: 12px;
 line-height: 12px;
 font-weight: normal;
}

@media screen and (max-width:750px) {
main {
 width: 100%;
 max-width: none;
 margin: 0;
 padding: 70px 20px 10px 20px;
 background: none;
}
.pankuzu {
}
h1.logo a {
 text-indent: -9999px;
 width: 230px;
 height: 120px;
 margin: 0 auto;
 background: url(../img/logo-sp.png) no-repeat bottom center;
 display: block;
}
}
/*-------------------------------------------------
 foot-ban-wrap
-------------------------------------------------*/
.foot-ban-wrap {
 padding: 20px 0;
     background: #82cddd;
}
.foot-ban-wrap ul {
 display: flex;
 justify-content: space-between;
 width: 100%;
 max-width: 1000px;
 margin: 0 auto;
}
.foot-ban-wrap li {
 width: 286px;
 margin: 0 10px 0 0;
}
.foot-ban-wrap li:last-child {
 margin: 0;
}
.foot-ban-wrap li img {
 width: 100%;
 height: auto;
}
@media screen and (max-width:750px) {
.foot-ban-wrap ul {
 justify-content: center;
 flex-direction: column;
 max-width: none;
}
 .foot-ban-wrap li, .foot-ban-wrap li:last-child {
  margin: 0 auto 10px auto;
 }
}
/*-------------------------------------------------
 footer
-------------------------------------------------*/
footer {
 width: 100%;
 background: #007bbb;
}
#pagetop a {
 box-sizing: border-box;
 display: block;
 text-align: center;
 width: 80px;
 height: 80px;
 border-radius: 50px;
 z-index: 9;
 position: fixed;
 bottom: 20px;
 right: 20px;
 background: rgba(56,161,219,0.5);
 color: #FFF;
 fot-size: 0.8rem;
 letter-spacing: 0em;
 padding-top: 25px;
}
#pagetop a:hover {
 background: rgba(56,161,219,0.9);
 transition: all .5s;
}
footer .copyright {
 width: 100%;
 max-width: 1000px;
 padding: 10px 0;
 margin: 0 auto;
 color: #FFF;
 font-size: 12px;
 text-align: right;
}

@media screen and (max-width:750px) {
footer {
 padding: 0 10px;
}
}
/*===========================
 トップページ（top）
===========================*/
main.top {
 width: 100%;
 max-width: 1000px;
 margin: 0 auto;
 padding: 70px 20px 20px 270px;
 background: url(../img/main.jpg) no-repeat bottom center;
 height: auto;
 min-height: 640px;
}

@media screen and (max-width:750px) {
main.top {
 width: 100%;
 max-width: none;
 margin: 0;
 padding: 35px 10px 10px 10px;
 background: url(../img/main-sp.jpg) no-repeat bottom center;
 min-height: 650px;
}
}
/*===========================
下層ページ共通
===========================*/
.flex-wrap {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 margin: 0 0 20px 0;
}
.flex-wrap .txt-box {
 width: calc(100% - 300px);
}
.flex-wrap .img-box {
 width: 300px;
 height: auto;
}
.flex-wrap .img-box img {
 width: 100%;
 height: 100%; background: #FFF;
 padding: 3px;
 border: 1px solid #DDD;
}
@media screen and (max-width:750px) {
.flex-wrap {
 flex-direction: column;
}
.flex-wrap .img-box {
 width: 100%;
 max-width: 400px;
 margin: 0 auto;
 height: auto;
}
.flex-wrap .txt-box {
 width: 100%;
 padding: 0;
}
}
/*===========================
 La Pausaについて（profile）
===========================*/
.profile h3 {
 font-family: 'M PLUS Rounded 1c', sans-serif;
 font-size: 16px;
 font-weight: 400;
 color: #FFF;
 background: #38a1db;
 border-radius: 3px;
 padding: 0 10px;
 margin: 0 0 20px 0;
}
.profile .box-wrap {
 margin: 0 0 30px 0;
}
.profile .box01 .txt-box {
 padding: 0 20px 0 0;
}
.profile .box02 .txt-box {
 padding: 0 0 0 20px;
}
/*サロンプロフィール*/
.profile .box01 .salon-data, .profile .box01 .salon-data a, .profile .box01 .salon-data i {
 color: #007bbb;
 margin: 10px 0 0 0;
}
.profile .box01 .salon-data span.note {
 color: #007bbb;
 font-size: 14px;
}
/*主宰プロフィール*/
.profile .box02 .name {
 font-size: 24px;
 font-family: 'Noto Serif JP', serif;
 font-weight: 300;
 margin: 0 0 15px 0;
 border-bottom: 1px dotted #CCC;
}
.profile .box02 .name .en {
 font-size: 16px;
 margin: 0 0 0 10px;
 color: #007bbb;
}
.profile .box02 .title {
 font-size: 14px;
 margin: 0 0 15px 0;
 color: #007bbb;
}
.profile .box02 .message {
 background: #FFF;
 border: 1px solid #CCC;
 padding: 30px;
 margin: 20px 0 0 0;
}
.profile .box02 .message h4 {
 font-size: 22px;
 font-family: 'Noto Serif JP', serif;
 font-weight: 300;
 margin: 0 0 15px 0;
}
.profile .box02 .message p {
 line-height: 180%;
}
.profile .box02 .message p+p {
 margin: 10px 0 0 0;
}
@media screen and (max-width:750px) {
.profile .box01 .img-box {
 margin: 20px auto 0 auto;
 }
.profile .box02 .img-box {
 margin: 0 auto 20px auto;
 }
}
/*===========================
 初めての方へ（about）
===========================*/
.about .flex-wrap {
 margin: 0 0 20px 0;
}
.about .flex-wrap .txt-box {
 padding: 0 20px 0 0;
}
.about .flex-wrap.reverse .txt-box {
 padding: 0 0 0 20px;
}
.about .box02 h3 {
 font-family: 'M PLUS Rounded 1c', sans-serif;
 font-size: 16px;
 font-weight: 400;
 color: #FFF;
 background: #38a1db;
 border-radius: 3px;
 padding: 0 10px;
 margin: 0 0 20px 0;
}
.about .box02 .flex-wrap {
 margin: 0 0 20px 0;
}
.about .box02 .flex-wrap .txt-box {
 padding: 0 20px 0 0;
}
.about .box02 .flex-wrap .txt-box h4 {
 font-family: 'M PLUS Rounded 1c', sans-serif;
 font-size: 18px;
 font-weight: 500;
 margin: 0 0 10px 0;
 color: #007bbb;
}
.about .box02 .flex-wrap .txt-box h4 span {
 background: #007bbb;
 color: #FFF;
 padding: 0 10px;
 margin: 0 10px 0 0;
}
.about .note {
 font-size: 14px;
 color: #007bbb;
}

@media screen and (max-width:750px) {
.about h2 {
 font-size: 26px;
}
.about .box01 .flex-wrap,  .about .box02 .flex-wrap {
 flex-direction: column;
}
.about .box01 .flex-wrap.reverse {
 flex-direction: column-reverse;
}
.about .box01 .flex-wrap .txt-box, .about .box02 .flex-wrap .txt-box {
 padding: 0;
 margin: 0 0 20px 0;
}
.about .box01 .flex-wrap.reverse .txt-box {
 padding: 0;
}
.about .box01 .flex-wrap.reverse .img-box {
 margin: 0 0 20px 0;
}
}
/*===========================
 メニュー（menu）
===========================*/
.menu .box01 {
 margin: 0 0 50px 0;
}
.menu .box01 h3 {
 font-family: 'M PLUS Rounded 1c', sans-serif;
 font-size: 18px;
 font-weight: 500;
 color: #007bbb;
 margin: 0 0 10px 0;
 border-bottom: 1px dotted #007bbb;
}
.menu .box01 .lead-txt {
 margin: 0 0 10px 0;
}
.menu .box01 .lead-txt a {
 color: #007bbb;
 text-decoration: underline;
}
.menu .box01 .lead-txt a:hover {
 text-decoration: none;
}
.menu .box01 ul {
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-start;
 margin: 0 0 20px 0;
}
.menu .box01 li {
 display: block;
 width: calc(100% / 3 - 10px);
 margin: 0 15px 10px 0;
 height: 120px;
 background: #FFF;
 border: 1px solid #DDD;
}
.menu .box01 li:nth-child(3) {
 margin: 0 0 10px 0;
}
.menu .box01 li a {
 margin: 3px;
 display: block;
 position: relative;
 width: calc(100% - 6px);
 height: calc(100% - 6px);
}
.menu .box01 li a span {
 font-size: 14px;
 padding: 3px 0 0 10px;
 display: block;
 position: absolute;
 bottom: 0px;
 background: #FFF;
 width: 100%;
}
.menu .box01 li a span::before {
 font-family: "Font Awesome 5 Free";
 content: "\f0da";
 margin: 0 7px 0 0;
 font-weight: bold;
 color: #007bbb;
}
.menu .box01 li.menu01 a {
 background: url("../img/menu-nav-01.jpg") no-repeat center top;
}
.menu .box01 li.menu02 a {
 background: url("../img/menu-nav-02.jpg") no-repeat center top;
}
.menu .box01 li.menu03 a {
 background: url("../img/menu-nav-03.jpg") no-repeat center top;
 background-size: cover;
}
.menu .box01 li.menu04 a {
 background: url("../img/menu-nav-04.jpg") no-repeat center top;
 background-size: cover;
}
.menu .box01 li.menu05 a {
 background: url("../img/menu-nav-05.jpg") no-repeat center top;
 background-size: cover;
}
.menu .box01 li.menu06 a {
 background: url("../img/menu-nav-06.jpg") no-repeat center top;
 background-size: cover;
}
.menu .box01 li.menu07 a {
 background: url("../img/menu-nav-09.jpg") no-repeat center top;
 background-size: cover;
}
.menu .box01 li.menu08 a {
 background: url("../img/menu-nav-11.jpg") no-repeat center top;
 background-size: cover;
}
.menu .box01 li.menu09 a {
 background: url("../img/menu-nav-12.jpg") no-repeat center top;
 background-size: cover;
}
.menu .box01 li.menu10 a {
 background: url("../img/menu-nav-14.jpg") no-repeat center top;
 background-size: cover;
}
/*ここからメニュー詳細*/
.menu .box02 h3,.menu .box03 h3 {
 font-family: 'M PLUS Rounded 1c', sans-serif;
 font-size: 20px;
 font-weight: 400;
 color: #FFF;
 background: #82cddd url("../img/detail-bg.png") no-repeat top right;
 background-size: 15%;
 padding: 10px 20px;
 border-radius: 7px;
 margin: 0 0 20px 0;
}
.menu .box02 .detail {
 margin: 0 0 80px 0;
}
.menu .box02 h4 {
 font-family: 'M PLUS Rounded 1c', sans-serif;
 font-size: 18px;
 font-weight: 400;
 color: #FFF;
 background: #38a1db;
 border-radius: 3px;
 padding: 2px 10px 0 10px;
 margin: 0 0 20px 0;
}
.menu .box02 .flex-wrap {
 display: flex;
 justify-content: space-between;
 margin: 0 0 20px 0;
}
.menu .box02 .flex-wrap .txt-box {
 padding: 0 20px 0 0;
}
.menu .box02 .note {
 font-size: 14px;
 color: #007bbb;
}
.menu .box02 .txt {
 margin: 0 0 20px 0;
}
.menu .box02 table {
 width: 100%;
 border-collapse: collapse;
}
.menu .box02 th, .menu .box02 td {
 border: 1px solid #DDD;
 padding: 3px 10px;
 font-weight: normal;
}
.menu .box02 .tablehead th {
 background: #EEE;
}
.menu .box02 .tablehead th.no-content {
 background: none;
 border: none;
}
.menu .box02 .tablehead th.ws {
 width: 12%;
}
.menu .box02 .tablehead th.wm {
 width: 25%;
}
.menu .box02 .tablehead th.wl {
 width: 46%;
}
.menu .box02 td {
 background: #FFF;
 text-align: center;
}
.menu .box02 td.fs14 {
 text-align: left;
}
.menu .course01 th {
 background: #82cddd;
 color: #FFF;
 text-align: left;
}
.menu .course02 th {
 background: #38a1db;
 color: #FFF;
 text-align: left;
}
.menu .course03 th {
 background: #006699;
 color: #FFF;
 text-align: left;
}

/*ハーブテント*/
.menu06 h5 {
 border-bottom: 1px solid #007bbb;
 color: #007bbb;
 margin: 0 0 10px 0;
}
.menu06 .txt p span {
 color: #007bbb;
 font-weight: bold;
}
.menu06 dt {
 color: #007bbb;
 font-weight: bold;
}
.menu06 dd {
 font-size: 14px;
}
.menu .box02 .price {
 background: #FFF;
 padding: 10px 15px;
 border: 1px solid #DDD;
 margin: 15px 0;
}
/*スペシャリティ*/
.menu11 table, .menu12 table, .menu13 table {
 margin: 15px 0 0 0;
}
/*ギフトチケット*/
.menu .box03 p+p {
 margin: 10px 0 0 0;
}
@media screen and (max-width:750px) {
.menu .box01 li {
 width: calc(100% / 2 - 6px);
}
 .menu .box01 li {
    margin: 0 12px 9px 0;
 }
.menu .box01 li:nth-child(3) {
 margin: 0 10px 10px 0;
}
.menu .box01 li:nth-child(even) {
 margin: 0 0 10px 0;
}
.menu .box02 .flex-wrap {
 flex-direction: column;
}
.menu .box02 .flex-wrap .txt-box {
 padding: 0;
 margin: 0 0 20px 0;
}
 .menu .box01 li a span {
  padding: 3px 0 0 3px;
  font-size: 13px;
 }
 .menu .box01 li a span::before {
      margin: 0 5px 0 0;
 }
 .menu .box03 {
    margin: 0 0 100px 0;
 }

}
/*===========================
ご予約・カレンダー（reservation）
===========================*/
.reserve {
 margin: 0 0 20px 0;
}
.reserve ul {
 margin: 15px 0 15px 5px;
}
.reserve ul.other {
 display: flex;
 justify-content: flex-start;
}
.reserve ul.other li a {
 display: block;
 font-family: 'M PLUS Rounded 1c', sans-serif;
 font-size: 20px;
 font-weight: 500;
}
.reserve ul.other li i {
 margin: 0 10px 0 0;
 font-size: 20px;
}
.reserve ul.other li.tel {
 margin: 0 50px 0 0;
}
.reserve ul.note li {
 font-size: 14px;
 color: #007bbb;
 margin: 0 0 10px 0;
}
.reservation .calendar {
 background: #FFF;
 padding: 5px;
 border-radius: 5px;
}

@media screen and (max-width:750px) {
.reserve ul.other {
 flex-direction: column;
}
}
/*===========================
 よくあるご質問（faq）
===========================*/
.faq h3 {
 font-family: 'M PLUS Rounded 1c', sans-serif;
 font-size: 16px;
 font-weight: 400;
 color: #FFF;
 background: #38a1db;
 border-radius: 3px;
 padding: 0 10px;
 margin: 0 0 20px 0;
}
.faq .faq-nav {
 margin: 0 0 20px 0;
}
.faq .faq-nav li {
 display: inline-block;
}
.faq .faq-nav li a {
 font-family: 'M PLUS Rounded 1c', sans-serif;
 font-size: 16px;
 font-weight: 500;
 display: block;
 margin: 0 20px 0 0;
 color: #007bbb;
}
.faq .faq-nav li a::before {
 font-family: "Font Awesome 5 Free";
 content: "\f13a";
 font-weight: bold;
 margin: 0 10px 0 0;
}
.faq .box-wrap {
 margin: 0 0 30px 0;
}
/*アコーディオンの設定*/
.faq .acordion {
 margin: 0 0 15px 0;
}
.faq .acordion .trigger {
 font-size: 18px;
 border-bottom: 1px dotted #007bbb;
 padding: 0 5px;
 margin: 0 0 10px 0;
 cursor: pointer;
 position: relative;
}
.faq .acordion .trigger::before {
 content: "Q.";
 color: #007bbb;
 margin: 0 10px 0 0;
}
.faq .acordion .trigger:hover {
 opacity: 0.75;
 transition: 0.3s;
}
.faq .acordion .trigger .open-close::after {
 font-family: "Font Awesome 5 Free";
 content: "\f0fe";
 font-size: 18px;
 font-weight: bold;
 color: #007bbb;
 position: absolute;
 right: 5px;
}
.faq .acordion .trigger.active .open-close::after {
 content: "\f146";
}
.faq .acordion .acordion_tree {
 background: #FFF;
 border-radius: 5px;
 padding: 10px 20px;
}
.faq .acordion .acordion_tree .flex-wrap {
 display: flex;
 justify-content: space-between;
}
.faq .acordion .acordion_tree .flex-wrap .txt-box {
 padding: 0 20px 0 0;
}

@media screen and (max-width:750px) {
.faq .acordion .trigger {
padding: 0 25px 0 5px;
}
 .faq .acordion .acordion_tree .flex-wrap {
 flex-direction: column;
}
.faq .acordion .acordion_tree .flex-wrap .txt-box {
 padding: 0;
 margin: 0 0 20px 0;
}
}
/*===========================
 スクールのご案内（school）
===========================*/
.school .about-holisticaroma {
 margin: 10px 0 20px 0;
 padding: 10px 200px 10px 10px;
 background: #ebf6f7 url("../img/school-01.jpg") no-repeat right top;
 background-size: contain;
 border-radius: 7px;
}
.school .about-holisticaroma .midashi {
 display: block;
}
/*受講モデル*/
.school .school-model {
 padding: 10px 15px;
 background: #FFF;
 border: 1px solid #DDD;
 margin: 0 0 30px 0;
}
.school .school-model h3 {
 line-height: 140%;
 margin: 0 0 20px 0;
 border-bottom: 1px dotted #DDD;
 text-align: center;
}
.school .school-model li {
 display: block;
 background: #82cddd;
 color: #FFF;
 border-radius: 5px;
 margin: 0 0 5px 0;
 padding: 2px 10px;
 text-align: center;
}
.school .school-model li.step2 {
 background: #38a1db;
}
.school .school-model li.step2.diploma {
 background: none;
 border: 2px solid #38a1db;
 color: #38a1db;
}
.school .school-model li.step3 {
 background: #006699;
}
.school .school-model li.step3.test {
 background: none;
 color: #006699;
}
.school .school-model li.other.test {
 background: none;
 color: #006699;
}
.school .school-model li.other.diploma {
 background: none;
 border: 2px solid #006699;
 color: #006699;
}
.school .school-model li span {
 display: block;
 font-size: 12px;
 font-weight: bold;
 color: #FFF;
}
.school .school-model li.step1, .school .school-model li.step2.diploma, .school .school-model li.step3.test {
 margin: 0 0 15px 0;
 position: relative;
}
.school .school-model li.step1::after, .school .school-model li.step2.diploma::after, .school .school-model li.step3.test::after {
 font-family: "Font Awesome 5 Free";
 content: "\f0d7";
 font-weight: bold;
 display: block;
 width: 100%;
 text-align: center;
 position: absolute;
 bottom: -20px;
 color: #666;
}
/*ポイント*/
.school .point {
 margin: 0 0 20px 0;
}
.school .point h3 {
 font-family: 'M PLUS Rounded 1c', sans-serif;
 font-size: 20px;
 font-weight: 400;
 color: #007bbb;
 border-bottom: 1px solid #007bbb;
 margin: 0 0 10px 0;
}
.school .point p+p {
 margin: 10px 0 0 0;
}
.school .point ul {
 margin: 10px 0;
}
.school .point li, .school .curriculum li {
 padding: 0 0 0 20px;
 position: relative;
}
.school .point li::before, .school .curriculum li::before {
 display: block;
 content: "・";
 position: absolute;
 left: 0;
}
/*オンラインスクールについて*/
.school .online {
 margin: 0 0 30px 0;
 border: 2px solid #e6b422;
 background: #FFF;
 padding: 10px 15px;
}
.school .online h3 {
font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 20px;
    font-weight: 500;
 color: #e6b422;
 border-bottom: 1px solid #e6b422;
 line-height: 140%;
 position: relative;
 margin: 0 0 20px 0;
}
.school .online h3::after {
 content: "La Pausa Online School";
 position: absolute;
 right: 5px;
 border-top: -5px;
 font-size: 14px;
    font-weight: 400;
}
.school .online .flex-wrap .txt-box {
 width: calc(100% - 240px);
 padding: 0 10px 0 0;
}
.school .online .img-box {
 width: 240px;
}
.school .online .online-ok {
 font-weight: bold;
 margin: 10px 0;
}
.school .online .price {
 color: #333;
 margin: 0 0 0 20px;
 font-weight: normal;
}
.school .online .tax {
 color: #333;
 font-size: 14px;
 font-weight: normal;
}
.school .online .note {
 color: #007bbb;
    font-size: 14px;
}
/*コース詳細*/
.school section {
 margin: 0 0 50px 0;
}
.school section h3 {
 font-family: 'M PLUS Rounded 1c', sans-serif;
 font-size: 20px;
 font-weight: 400;
 color: #FFF;
 background: #82cddd;
 border-radius: 3px;
 padding: 5px 10px 3px 10px;
 margin: 0 0 20px 0;
}
.school section.course02 h3 {
 background: #38a1db;
}
.school section.course03 h3 {
 background: #006699;
}
.school section h3 span {
 color: #FFF;
 font-size: 14px;
 margin: 0 20px 0 0;
}
.school section.course04 h3 {
 background: #FF6600;
 padding: 0 10px;
 font-size: 16px;
}
.school section.course04 h4 {
 font-family: 'Noto Serif JP', serif;
 font-size: 20px;
 font-weight: 200;
 color: #007bbb;
 margin: 0 0 10px 0;
}
.school section.course05 h3 {
 background: url("../img/nijiiro.png") no-repeat left top;
 text-indent: -999px;
 width: 100%;
 height: 60px;
}
.school .course05 .title-head {
 font-family: 'M PLUS Rounded 1c', sans-serif;
 color: #007bbb;
 font-size: 14px;
}
.school .midashi {
 font-family: 'M PLUS Rounded 1c', sans-serif;
 color: #007bbb;
 font-size: 14px;
 margin: 0 0 5px 0;
}
.school .target {
 padding: 10px;
 border: 1px solid #007bbb;
 margin: 0 0 20px 0;
}
.school .target li {
 padding: 0 0 0 20px;
 position: relative;
}
.school .target li::before {
 font-family: "Font Awesome 5 Free";
 content: "\f00c";
 font-weight: bold;
 font-size: 14px;
 color: #007bbb;
 display: block;
 position: absolute;
 left: 0;
}
.school .flex-wrap {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 margin: 0 0 20px 0;
}
.school .flex-wrap .txt-box {
 padding: 0 0 0 20px;
}
.school .curriculum {
 padding: 10px 15px;
 background: #FFF;
 border: 1px solid #DDD;
}
.school .price {
 color: #CC0000;
 margin: 10px 0 0 0;
}
.school .tax {
 color: #CC0000;
 font-size: 14px;
}
.school .curriculum .note {
 font-size: 14px;
}

/*STEP2*/
.school .curriculum {
 margin: 0 0 20px 0;
}
.school .curriculum dl {
 margin: 0 0 10px 0;
}
.school .curriculum dt {
 margin: 10px 0;
 background: #ebf6f7;
 padding: 0 10px;
 border-radius: 3px;
}
.school .curriculum dd {
 padding: 0 10px;
}
/*STEP3*/
.school .course03 table {
 border-collapse: collapse;
 background: #FFF;
 margin: 0 0 10px 0;
 width: 100%;
}
.school .course03 table th, .course03 table td {
 border: 1px solid #DDD;
 padding: 5px 10px;
 font-weight: normal;
}
.school .course03 table th {
 background: #ebf6f7;
}
.school .course03 table th.name {
 width: 25%;
}
.school .course03 table th.detail {
 width: 40%;
}
.school .course03 table th.common {
 width: 20%;
}
.school .course03 table th.price {
 width: 15%;
 color: #333;
}
.school .course03 table td span {
 font-size: 12px;
 display: block;
}
.school .course03 table td .tax {
 font-size: 14px;
 color: #333;
}
.school .course03 table li {
 padding: 0 0 0 20px;
 position: relative;
}
.school .course03 table li::before {
 display: block;
 content: "・";
 position: absolute;
 left: 0;
}
.school .course03 .curriculum .txt-box {
 width: calc(100% - 240px);
}
.school .course03 .curriculum .txt-box p+p {
 margin: 10px 0 0 0;
}
.school .course03 .note {
	    color: #007bbb;
    font-size: 14px;
 margin: 0 0 20px 0;
}
/*ソーシャルアロマ*/
.school .course04 .txt-box li {
 padding: 0 0 0 20px;
 position: relative;
}
.school .course04 .txt-box li::before {
 display: block;
 content: "・";
 position: absolute;
 left: 0;
}
/*にじいろアロマ*/
.school .course05 p+p {
 margin: 10px 0 0 0;
}

@media screen and (max-width:750px) {
 .school .about-holisticaroma {
  background: #ebf6f7;
   padding: 10px;
 }
 .school .flex-wrap {
  flex-direction: column;
 }
 .school .course03 .curriculum .about-muse .img-box {
  margin: 0 auto;
 }
 .school .course03 .curriculum .txt-box {
  width: 100%;
 }
.school .online .flex-wrap {
 margin: 0;
}
.school .online .flex-wrap .txt-box {
 width:100%;
 padding: 0 0 20px 0;
}
 .school section.course05 h3 {
     background-size: contain;
    max-width: 419px;
}
 .school .online h3::after {
  content: none;
 }
 .school .course01 .txt-box, .school .course02 .txt-box {
  margin: 0;
 }
 .school .online .price {
  margin: 0;
 }
 .school .school-model {
  padding: 10px;
 }
 .school .school-model li {
  padding: 2px 5px;
  font-size: 15px;
 }
 .school .point h3 {
  font-size: 18px;
 }
 .school .course03 .txt-box,
  .school .course04 .txt-box {
  margin: 0 0 10px 0;
 }
 .school .course03 table {
    display: block; 
    overflow-x: scroll; 
    white-space: nowrap; 
    -webkit-overflow-scrolling: touch;
}
 .school .course03 table::-webkit-scrollbar {
    -webkit-appearance: none;
  background: #ebf6f7;
    width: 10px;
}
.school .course03 table::-webkit-scrollbar-thumb {
    border-radius: 50px;
    background-color: rgba(56,161,219,0.3);
    height: 50px;
}
}
/*===========================
 セミナー・出張講座（seminar）
===========================*/
.seminar section ul, .seminar .tokucho ul {
 margin: 10px 0;
}
.seminar section li, .seminar .tokucho li {
 padding: 0 0 0 20px;
 position: relative;
 display: inline-block;
 margin: 0 20px 0 0;
}
.seminar section li::before, .seminar .tokucho li::before {
 display: block;
 content: "・";
 position: absolute;
 left: 0;
}
.seminar .midashi {
 font-family: 'M PLUS Rounded 1c', sans-serif;
 color: #007bbb;
 font-size: 14px;
}
.seminar .tokucho, .seminar .seminar-detail {
 background: #FFF;
 border: 1px solid #DDD;
 padding: 10px 15px;
 margin: 0 0 20px 0;
}
.seminar section {
 margin: 0 0 50px 0;
}
.seminar h3 {
 font-family: 'M PLUS Rounded 1c', sans-serif;
 font-size: 20px;
 font-weight: 400;
 color: #FFF;
 background: #38a1db;
 border-radius: 3px;
 padding: 5px 10px;
 margin: 0 0 20px 0;
}

.seminar .flex-wrap .txt-box {
 padding: 0 20px 0 0;
}
.seminar .seminar-detail h5 {
 font-size: 14px;
 color: #007bbb;
 border-bottom: 1px dotted #007bbb;
}
.seminar .seminar-detail h5::before {
 font-family: "Font Awesome 5 Free";
 content: "\f0d7";
 font-weight: bold;
 margin: 0 7px 0 0;
}
/*seminar04*/
.seminar04 .txt {
 margin: 0 0 20px 0;
}
/*seminar06*/
.seminar06 li {
 width: calc(50% - 25px);
}

/*===========================
お問い合わせ（contact）
===========================*/
.contact .lead-txt .note {
 color: #007bbb;
 font-size: 14px;
}
.contact .lead-txt .btn {
 font-family: 'M PLUS Rounded 1c', sans-serif;
 font-weight: 500;
 display: block;
 width: 100%;
 max-width: 300px;
 text-align: center;
}
.contact .lead-txt .btn a {
 font-size: 20px;
 display: block;
 padding: 10px 30px;
 background: #82cddd;
 border-radius: 5px;
 color: #FFF;
 position: relative;
}
.contact .lead-txt .btn a::after {
 font-family: "Font Awesome 5 Free";
 content: "\f138";
 font-weight: bold;
 position: absolute;
 right: 10px;
}
.contact .privacy h5 {
 font-family: 'M PLUS Rounded 1c', sans-serif;
 font-weight: 500;
 margin: 0 0 10px 0;
 color: #007bbb;
 border-bottom: 1px solid #007bbb;
}
.contact .privacy p {
 font-size: 14px;
}
@media screen and (max-width:750px) {
 .seminar section li, .seminar .tokucho li {
  margin: 0;
 }
 .seminar .flex-wrap {
  flex-direction: column;
 }
 .seminar .flex-wrap .txt-box {
  padding: 0;
  margin: 0 0 20px 0;
 }
 .seminar06 li {
  width: 100%;
  display: block;
 }
}
/*===========================
お問い合わせ・form部分の設定（form）
===========================*/
form#mail_form {
 width: 100%;
 background: #FFF;
 border: 1px solid #DDD;
 padding: 20px;
 margin: 0 0 20px 0;
}
form#mail_form dl {
 overflow : hidden;
}
form#mail_form dl dt {
 clear : both;
 width : 30%;
 float : left;
 border-top : 1px dotted #cccccc;
 padding : 15px 0;
 text-align : right;
 overflow : hidden;
}
form#mail_form dl dd {
 width : 68%;
 float : right;
 border-top : 1px dotted #cccccc;
 padding : 15px 0 15px 20px;
}
form#mail_form dl dt:first-child, form#mail_form dl dt:first-child+dd {
 border : none;
}
form#mail_form dl dt span {
 display : block;
 font-size : 0.7rem;
 color : #007bbb;
}
/* -- for JavaScript ここから -- */
form#mail_form dl dt span.required, form#mail_form dl dt span.optional {
 display : inline-block;
 float : left;
 color : #ffffff;
 line-height : 1;
 padding : 4px 9px;
 border-radius : 3px;
}
form#mail_form dl dt span.required {
 background : #ea618e;
 border : 1px solid #ea618e;
}
form#mail_form dl dt span.optional {
 background : #337ab7;
 border : 1px solid #2e6da4;
}
form#mail_form dl dd span.error_blank, form#mail_form dl dd span.error_format, form#mail_form dl dd span.error_match {
 display : block;
 color : #ff0000;
 margin-top : 3px;
}
span.loading {
 width : 50px;
 height : 50px;
 border-radius : 50%;
 border-top : 5px solid rgba( 255, 255, 255, 0.2 );
 border-right : 5px solid rgba( 255, 255, 255, 0.2 );
 border-bottom : 5px solid rgba( 255, 255, 255, 0.2 );
 border-left : 5px solid #ffffff;
 -webkit-transform : translateZ( 0 );
 -ms-transform : translateZ( 0 );
 transform : translateZ( 0 );
 -webkit-animation : load-circle 1.0s linear infinite;
 animation : load-circle 1.0s linear infinite;
 position : absolute;
 top : 50%;
 left : 50%;
 margin-top : -25px;
 margin-left : -25px;
}
@-webkit-keyframes load-circle {
 0% {
 -webkit-transform : rotate( 0deg );
 transform : rotate( 0deg );
}
 100% {
 -webkit-transform : rotate( 360deg );
 transform : rotate( 360deg );
}
}
@keyframes load-circle {
 0% {
 -webkit-transform : rotate( 0deg );
 transform : rotate( 0deg );
}
 100% {
 -webkit-transform : rotate( 360deg );
 transform : rotate( 360deg );
}
}
/* -- for JavaScript ここまで -- */
form#mail_form input[type="text"], form#mail_form input[type="email"], form#mail_form input[type="tel"] {
 max-width : 90%;
 height : 2em;
 padding : 2px 2%;
 border : 1px solid #cccccc;
 border-radius : 3px;
 background : #fafafa;
 -webkit-appearance : none;
 font-size : 100%;
 font-family : inherit;
 margin-top : 5px;
}
form#mail_form input[type="text"]:focus, form#mail_form input[type="email"]:focus, form#mail_form input[type="tel"]:focus, form#mail_form textarea:focus {
 box-shadow : 0px 0px 5px #55ccff;
 border : 1px solid #55ccff;
 background : #ffffff;
}
form#mail_form ul li input[type="radio"], form#mail_form ul li input[type="checkbox"] {
 margin-right : 10px;
 margin-top : 7px;
}
form#mail_form ul li:first-child input[type="radio"], form#mail_form ul li:first-child input[type="checkbox"] {
 margin-top : 0px;
}
form#mail_form select {
 font-size : 100%;
 margin-top : 5px;
}
form#mail_form textarea {
 display : block;
 width : 90%;
 max-width : 90%;
 height : 200px;
 padding : 2px 2%;
 resize : vertical;
 border : 1px solid #cccccc;
 border-radius : 3px;
 background : #fafafa;
 -webkit-appearance : none;
 font-size : 100%;
 font-family : inherit;
}
form#mail_form ul {
 list-style-type : none;
}
form#mail_form ul li label:hover {
 cursor : pointer;
}
form#mail_form input#name_1, form#mail_form input#name_2, form#mail_form input#phone {
 width : 30%;
}
form#mail_form input#mail_address, form#mail_form input#mail_address_confirm {
 width : 80%;
}
form#mail_form p#form_submit {
 width : 90%;
 margin : 0 auto;
 padding : 30px 0 10px 0;
 text-align: center;
}
form#mail_form input[type="button"] {
 padding : 9px 50px;
 vertical-align : middle;
 background : #007bbb;
 border : none;
 border-radius : 3px;
 color : #ffffff;
 font-size : 1rem;
}
form#mail_form input[type="button"]:hover {
 cursor : pointer;
 opacity: 0.7;
 transition: opacity .3s;
}

@media screen and ( max-width : 750px ) {
.contact-read {
 width: 100%;
 letter-spacing: 0em;
}
.privacy {
 width: 90%;
}
form#mail_form {
 width: 100%;
 padding: 10px;
}
form#mail_form dl {
 overflow : visible;
 margin-left: auto;
 margin-right: auto;
}
form#mail_form dl dt {
 width : auto;
 float : none;
 text-align : left;
 padding : 10px 0 5px;
 font-weight : normal;
}
form#mail_form dl dd {
 width : auto;
 float : none;
 border-top : none;
 padding : 0px 0 15px 0px;
}
form#mail_form dl dt span {
 font-weight : normal;
}
/* -- for JavaScript ここから -- */
form#mail_form dl dt span.required, form#mail_form dl dt span.optional {
 margin-right : 1em;
 margin-bottom : 2em;
}
/* -- for JavaScript ここまで -- */

form#mail_form input#form_submit_button {
 margin-left : 0;
}
form#mail_form input#phone {
 width : 50%;
}
}

/*===========================
お問い合わせ・Thank youページの設定（thanks）
===========================*/
main.thanks {
 min-height: 650px;
}
.thanks ul.other {
 display: flex;
 justify-content: flex-start;
}
.thanks ul.other li.tel {
 margin: 0 50px 0 0;
}
.thanks ul.other li a {
 display: block;
 font-family: 'M PLUS Rounded 1c', sans-serif;
 font-size: 20px;
 font-weight: 500;
}
.thanks ul.other li i {
 margin: 0 10px 0 0;
 font-size: 20px;
}
@media screen and ( max-width : 750px ) {
.thanks ul.other {
 flex-direction: column;
}
}