@charset "UTF-8";
/* CSS Document */

/* GoogleFonts
font-family: 'Noto Serif JP', serif;
weight:200/300/400/500
*/

* {
 font-size: 16px;
 line-height: 160%;
 margin: 0;
 padding: 0;
 text-decoration: none;
 box-sizing: border-box;
 font-family: sans-serif;
}
.content-wrap {
 width: 100%;
 padding: 0;
}
section {
 margin: 0;
 padding: 60px 0;
 background: #FFF;
}
.content-inner {
 width: 90%;
 max-width: 1000px;
 margin: 0 auto;
}
h1, h2 {
 font-family: 'Noto Serif JP', serif;
 font-weight: 200;
 text-align: center;
}
h2 {
 font-size: 28px;
 margin: 0 0 50px 0;
}
h2 span {
 display: block;
 font-size: 16px;
 color: #64aab8;
 letter-spacing: 0.2em;
}
br.pc-none {
 display: none;
}
.lead {
 width: 80%;
 text-align: center;
 margin: 0 auto 50px auto;
 font-size: 16px;
}
strong {
 color: #f08300;
}
li {
 list-style-type: none;
}
/*ボックスなど共通設定*/
.img-box img {
 width: 100%;
 height: auto;
 border: 1px solid #FFF;
 padding: 2px;
}
.flex-wrap {
 display: flex;
 justify-content: space-between;
}
.txt-box p+p {
 margin: 15px 0 0 0;
}
/*リンク*/
a:hover {
 opacity: 0.8;
 transition: 0.3s;
}
/*体験レッスン申し込みボタン*/
.btn-wrap {
 margin: 50px 0 0 0;
 text-align: center;
}
.btn {
 display: block;
 width: 100%;
 max-width: 300px;
 background: #FFF;
 border-radius: 5px;
 margin: 10px auto;
}
.btn a {
 display: block;
 background: #f19ca7;
 border-radius: 5px;
 color: #FFF;
 padding: 10px 5px 10px 10px;
 text-align: center;
 font-size: 20px;
}
.btn a i {
 font-size: 22px;
}
.btn.phone {
 padding: 10px;
 border-radius: 0;
 border: 3px solid #f19ca7;
 max-width: 600px;
}
.btn.phone a {
 display: inline;
 background: none;
 border-radius: 0;
 color: #f19ca7;
 padding: 0;
}
.btn.phone span {
 font-size: 14px;
 display: block;
}
.mb10 {
 margin-bottom: 10px;
}
.mb20 {
 margin-bottom: 20px;
}
.txt-ce {
 text-align: center;
}
/*---------------------------------------------------------------
	ナビ
---------------------------------------------------------------*/
.nav-pc {
 z-index: 999;
 background: rgba(255,255,255,0.9);
 position: fixed;
 width: 100%;
 box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
 backdrop-filter: blur(3px);
}
.nav-pc .content-inner {
 position: relative;
 width: 100%;
}
.nav-pc .content-inner .logo {
 position: absolute;
 top: 0;
 left: 5px;
}
.nav-pc .content-inner .logo img {
 box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
}
.nav-pc ul {
 position: relative;
 top: 0;
 left: 100px;
}
.nav-pc li {
 display: inline-block;
 line-height: 40px;
 margin: 0 15px 0 0;
}
.nav-pc li a {
 color: #333;
 font-size: 14px;
}
.nav-pc .content-inner .line {
 position: absolute;
 top: 0;
 right: 0;
}
.nav-pc .content-inner .line a {
 display: block;
 line-height: 40px;
 padding: 0 20px;
 background: #f19ca7;
 color: #FFF;
}
/*スマホ用ナビの非表示*/
.nav-sp {
 display: none;
}
/*---------------------------------------------------------------
	ヘッダー
---------------------------------------------------------------*/
header {
 padding: 40px 0 0 0;
}
header .content-inner {
 width: 100%;
 max-width: none;
 background: #64aab8 url("../img/main.jpg") no-repeat top 50% center;
 background-size: cover;
 padding: 0;
 text-align: center;
}
h1 {
 color: transparent;
 height: 0px;
}
.title {
 color: #FFF;
 font-size: 30px;
 margin: 0 0 30px 0;
 text-shadow: 0px 0px 5px rgba(0,0,0,0.7);
 font-family: 'Noto Serif JP', serif;
 font-weight: 300;
 text-align: center;
}
header p strong {
 color: #FFFF00;
}
header .title-image {
 width: 100%;
 max-width: 300px;
 margin: 0 auto;
 padding: 10px 0 0 0;
}
header .title-image img {
 width: 100%;
 height: auto;
}
header .txt-box {
 color: #FFF;
 font-size: 18px;
 width: 90%;
 max-width: 400px;
 margin: 0 auto;
 text-align: left;
 text-shadow: 0px 0px 5px rgba(0,0,0,0.6);
}
header .btn-wrap {
 padding: 0 0 50px 0;
 margin: 25px 0 0 0;
}
header .btn {
 max-width: 350px;
 background: none;
}
header .btn a {
 background: #FFF;
 color: #f19ca7;
}
/*---------------------------------------------------------------
コンセプト（concept）
---------------------------------------------------------------*/
.concept {
 background: #fffff9;
}
.concept .lead {
 line-height: 200%;
}
.concept .box {
 width: 100%;
 max-width: 1000px;
 margin: 0 auto 50px auto;
}
.concept .box h3 {
 font-family: 'Noto Serif JP', serif;
 font-weight: 200;
 text-align: center;
 font-size: 28px;
 margin: 0 0 30px 0;
 color: #64aab8;
 border-bottom: 1px solid #85bfcb;
}
.concept .img-box {
 width: 48%;
}
.concept .img-box img {
 border: 1px solid #85bfcb;
}
.concept .txt-box {
 width: 48%;
}
.concept .txt-box h4 {
 font-family: 'Noto Serif JP', serif;
 font-weight: 200;
 font-size: 18px;
 border-bottom: 1px dotted #85bfcb;
 margin: 0 0 15px 0;
 color: #64aab8;
}
.concept .txt-box h4::before {
 font-family: "Font Awesome 5 Free";
 content: "\f4d8";
 font-weight: bold;
 margin: 0 5px 0 0;
 color: #85bfcb;
}
.concept .flex-wrap+.flex-wrap {
 margin: 30px 0 0 0;
}
.concept-02 .flex-wrap {
 flex-direction: row-reverse;
}
.concept .bg-white {
 background: #FFF;
 border-radius: 5px;
 padding: 10px 15px;
 margin: 20px 0;
 border: 1px dotted #85bfcb;
 color: #666;
}
.concept .bg-white p {
 line-height: 180%;
}
.concept .bg-white h5 {
 font-family: 'Noto Serif JP', serif;
 font-weight: 200;
 font-size: 18px;
}
.concept .bg-white span {
 background: #a4c1d7;
 color: #FFF;
 padding: 5px 10px;
}
.concept .flow {
 background: #eee7e0;
 padding: 10px 20px;
}
.concept .flow h4 {
 border: none;
 text-align: center;
 color: #333;
 font-size: 16px;
 margin: 0;
}
.concept .flow h4::before {
 content: none;
}
.concept .flow h5 {
 font-family: 'Noto Serif JP', serif;
 font-weight: 200;
 border-bottom: 1px solid rgba(0,0,0,0.1);
 margin: 10px 0 5px 0;
 padding: 0;
}
.concept .flow .img-box {
 width: 40%;
}
.concept .flow .txt-box {
 width: 57%;
}
.concept .flow p {
 font-size: 14px;
 line-height: 150%;
}
.concept .flow .img-box img {
 border: none;
}
/*---------------------------------------------------------------
体験レッスン（trial）
---------------------------------------------------------------*/
.trial {
 background: #f9d1cb;
}
.trial h2 span {
 color: #FFF;
}
.trial .lead {
 text-align: center;
 max-width: 600px;
}
.trial .lead p+p {
 margin: 20px 0 0 0;
}
.trial table {
 max-width: 400px;
 border-collapse: separate;
 margin: 20px auto 5px auto;
}
.trial table td {
 text-align: center;
 padding: 7px 10px;
 background: #FFF;
}
.trial table th {
 text-align: center;
 padding: 7px 10px;
 font-weight: normal;
 background: #85bfcb;
 color: #FFF;
}
.trial .campaign01, .trial .campaign02 {
 text-align: center;
 padding: 20px 30px;
 margin: 0 20px;
 background: rgba(255,255,255,0.9);
 border-radius: 7px;
 position: relative;
}
.trial .campaign01 p, .trial .campaign02 p {
 font-size: 20px;
 font-weight: bold;
}
.trial .campaign01 p strong, .trial .campaign02 p strong {
 font-size: 20px;
 font-weight: bold;
}
.trial .campaign01 span {
 font-size: 14px;
 font-weight: normal;
}
.trial .campaign02 .box-wrap {
 display: flex;
 justify-content: center;
 margin: 20px 0 0 0;
}
.trial .campaign02 .box-wrap .box {
 width: calc(100% / 2 - 15px);
}
.trial .campaign02 .box-wrap .box p {
 text-align: left;
 font-size: 16px;
 font-weight: normal;
}
.trial .bridge {
 display: block;
 margin: 0 auto;
 width: 50px;
 height: 50px;
 text-align: center;
 line-height: 50px;
 font-size: 40px;
 font-weight: bold;
 color: #FFF;
}
.trial .campaign02 .box-wrap .box p strong {
 font-size: 16px;
}
.trial .campaign02 .box-wrap .box h4 {
 font-size: 18px;
 margin: 0 0 10px 0;
}
.trial .campaign02 .box-wrap .box h4 span {
 font-size: 14px;
 color: #FFF;
 background: #f19ca7;
 padding: 0px 10px;
 margin: 0 0 10px 0;
 display: inline-block;
}
.trial .campaign02 .box-wrap .box .img-box img {
 border: none;
 padding: 0;
}
.trial .campaign01 figure, .trial .campaign02 figure {
 display: block;
 width: 100px;
 height: 100px;
 border-radius: 50%;
 text-align: center;
 padding: 25px 0 0 0;
 background: #f19ca7;
 color: #FFF;
 box-sizing: border-box;
 position: absolute;
 top: -15px;
 left: -15px;
 transform: rotate(-10deg);
}
.trial .campaign01 figure span, .trial .campaign02 figure span {
 display: block;
 font-size: 20px;
 font-weight: bold;
}
/*---------------------------------------------------------------
レッスンの流れ（lesson）
---------------------------------------------------------------*/
.lesson {
 background: #fffff9;
}
.lesson .box {
 width: calc(100% / 3 - 15px);
 position: relative;
 background: #FFF;
 border-radius: 5px;
 padding: 10px;
 border: 2px solid #85bfcb;
}
.lesson .box span.step {
 display: block;
 position: absolute;
 top: -2px;
 left: 10px;
 background: #f19ca7;
 color: #FFF;
 width: 50px;
 padding: 5px 0 0 0;
 text-align: center;
 font-size: 12px;
 line-height: 100%;
}
.lesson .box span.step span {
 display: block;
 font-size: 16px;
}
.lesson .box span.step::after {
 content: "";
 display: block;
 width: 50px;
 height: 12px;
 border-top: 0px solid transparent;
 border-bottom: 12px solid transparent;
 border-left: 25px solid #f19ca7;
 border-right: 25px solid #f19ca7;
 box-sizing: border-box;
 position: absolute;
 bottom: -12px;
}
.lesson .box h3 {
 color: #64aab8;
 margin: 0 0 5px 0;
 padding: 0 0 0 60px;
 font-size: 18px;
 font-weight: normal;
}
.lesson .txt-box {
 width: 90%;
 margin: 10px auto;
}
.lesson .txt-box p.note {
 font-size: 14px;
 color: #666;
 line-height: 140%;
}
/*---------------------------------------------------------------
コース・料金（price）
---------------------------------------------------------------*/
.price {
 background: #f8f4e6;
}
.price table {
 width: 100%;
 border-collapse: separate;
 margin: 20px 0 0 0;
}
.price table.common {
 max-width: 400px;
 margin: 20px auto 0 auto;
}
.price table th, .price table td {
 text-align: center;
 padding: 5px;
}
.price table th {
 font-weight: normal;
 background: #85bfcb;
 color: #FFF;
}
.price table .midashi th {
 background: #a4998a;
}
.price table td {
 background: #FFF;
}
.price table td span {
 font-size: 14px;
 color: #666;
 display: block;
}
.price span.note {
 font-size: 14px;
 color: #666;
 line-height: 140%;
}
.camp {
 display: block;
 width: 100%;
 max-width: 400px;
 text-align: center;
 margin: 20px auto 0 auto;
 font-size: 18px;
 font-weight: bold;
 background: #FF9900;
 color: #FFF;
 border-radius: 5px;
 line-height: 40px;
 position: relative;
}
.camp::before {
 content: "";
 display: block;
 width: 14px;
 height: 10px;
 border-top: 0px solid rgba(0,0,0,0);
 border-bottom: 10px solid #FF9900;
 border-left: 7px solid rgba(0,0,0,0);
 border-right: 7px solid rgba(0,0,0,0);
 position: absolute;
 top: -10px;
 left: calc(50% - 7px);
 box-sizing: border-box;
}
/*メッセージ*/
.trial .message {
 width: 90%;
 max-width: 700px;
 margin: 0 auto;
}
.trial .message h3 {
 font-family: 'Noto Serif JP', serif;
 font-weight: 200;
 text-align: center;
 font-size: 24px;
 margin: 0 0 30px 0;
}
.trial .message p {
 line-height: 180%;
 font-size: 16px;
}
.trial .message p +p {
 margin: 20px 0 0 0;
}
.trial .message p span {
 border-bottom: 1px dotted #FFF;
 padding: 0 0 3px 0;
}
.trial .message p span .note {
 font-size: 12px;
 border-bottom: none;
}
/*---------------------------------------------------------------
よくある質問（faq）
---------------------------------------------------------------*/
.faq {
 background: #fffff9;
}
.accordion-box {
 border: 2px solid #85bfcb;
 background: #FFF;
 margin: 10px 0 0 0;
 padding: 10px;
}
.accordion-wrap .accordion-header {
 cursor: pointer;
 position: relative;
 padding: 0 35px 0 0;
}
.accordion-wrap .accordion-header:hover {
 opacity: 0.8;
 transition: 0.3s;
}
.accordion-wrap .accordion-header::after {
 font-family: "Font Awesome 5 Free";
 content: "\f067";
 color: #85bfcb;
 font-weight: bold;
 position: absolute;
 top: calc(50% - 12px);
 right: 0;
 font-size: 22px;
}
.accordion-wrap .accordion-header.open::after {
 font-family: "Font Awesome 5 Free";
 content: "\f068";
 color: #85bfcb;
 font-weight: bold;
 position: absolute;
 top: calc(50% - 12px);
 right: 0;
 font-size: 22px;
}
.accordion-wrap .accordion-header p {
 font-size: 20px;
 color: #85bfcb;
}
.accordion-wrap .accordion-header p::before {
 content: "Q.";
 font-size: 22px;
 font-weight: bold;
 color: #85bfcb;
 margin: 0 10px 0 0;
}
.accordion-wrap .accordion-inner {
 display: none;
 margin: 5px 0 0 0;
 padding: 7px 0 0 0;
 border-top: 1px dotted #85bfcb;
 color: #333;
}
.accordion-wrap .accordion-inner p {
 padding: 0 10px;
}
.accordion-wrap .accordion-inner p+p {
 margin: 10px 0 0 0;
}
.accordion-wrap .accordion-inner p a {
 color: #f08300;
 text-decoration: underline;
}
.accordion-wrap .accordion-inner .bg-gray {
 padding: 10px 20px;
 font-size: 18px;
 background: #fafdff;
 margin: 10px 0;
}
.accordion-wrap .accordion-inner .bg-gray p {
 line-height: 200%;
}
.accordion-wrap .accordion-inner .bg-gray p a {
 font-weight: bold;
 color: #f08300;
 text-decoration: none;
}
.faq .btn.phone {
 background: none;
 border: none;
 max-width: none;
 margin: 0;
}
/*---------------------------------------------------------------
	フッター（footer）
---------------------------------------------------------------*/
footer {
 background: #85bfcb;
 padding: 80px 0 0 0;
 text-align: center;
}
footer .copyright {
 text-align: center;
 font-size: 14px;
 padding: 30px 0 20px 0;
 color: #FFF;
}
footer #pagetop a {
 box-sizing: border-box;
 display: block;
 text-align: center;
 width: 80px;
 height: 80px;
 border-radius: 50px;
 z-index: 999;
 position: fixed;
 bottom: 20px;
 right: 20px;
 background: rgba(0,0,0,0.5);
 color: #FFF;
 fot-size: 0.8rem;
 letter-spacing: 0em;
 padding-top: 25px;
}
footer #pagetop a:hover {
 background: rgba(0,0,0,0.7);
 transition: all .5s;
}
footer p, footer p a {
 color: #FFF;
}
footer .btn-wrap {
 margin: 0 0 80px 0;
}
footer .btn {
     margin: 10px auto;
}
footer .btn.phone {
 color: #333;
}
/*====================================
	　560pxまでの幅の場合に適応
====================================*/

@media screen and (max-width: 560px) {
br.pc-none {
 display: inherit;
}
br.sp-none {
 display: none;
}
.lead {
 width: 90%;
 text-align: left;
 margin: 0 auto 30px auto;
}
/*---------------------------------------------------------------
	ナビ
---------------------------------------------------------------*/
.nav-pc {
 display: none;
}
.content-inner {
 width: 95%;
}
/*スマホ用ナビの非表示*/
.nav-sp {
 display: inherit;
}
.nav-sp {
 z-index: 999;
 background: rgba(241,156,167,0.9);
 position: fixed;
 width: 100%;
 height: 50px;
 box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
}
.nav-sp .content-inner {
 position: relative;
 width: 100%;
}
.nav-sp .content-inner .line {
 position: absolute;
 top: 0;
 right: 0;
}
.nav-sp.content-inner .line {
 position: absolute;
 top: 0;
 right: 0;
}
.nav-sp .content-inner .line a {
 display: block;
 line-height: 50px;
 padding: 0 20px;
 color: #FFF;
}
/*---------------------------------------------------------------
	ヘッダー
---------------------------------------------------------------*/
header {
 padding: 50px 0 0 0;
}
header .content-inner {
 background: #64aab8;
 background-size: contain;
}
header .title-image {
 background: url("../img/main-sp.jpg") no-repeat bottom -50px center;
 background-size: cover;
 max-width: none;
}
header .title-image img {
 max-width: 250px;
}
.title {
 font-size: 26px;
 padding: 10px 0 0 0;
}
header .txt-box {
 font-size: 16px;
 text-shadow: none;
}
header .btn-wrap {
 padding: 0 0 20px 0;
}
/*---------------------------------------------------------------
コンセプト（concept）
---------------------------------------------------------------*/
.concept .box h3 {
 margin: 0 0 10px 0;
 font-size: 26px;
}
.concept .flex-wrap {
 flex-direction: column;
}
.concept .img-box {
 width: 100%;
}
.concept .txt-box {
 width: 100%;
 margin: 10px auto;
}
.concept .flow {
 padding: 10px 10px;
}
.concept .flow .flex-wrap {
 flex-direction: row;
}
.concept .flow .flex-wrap .txt-box {
 margin: 0;
}
/*---------------------------------------------------------------
	料金・コース（price）
---------------------------------------------------------------*/
.camp {
 font-size: 20px;
 line-height: 28px;
 padding: 10px 0;
}
/*---------------------------------------------------------------
	体験レッスン（trial）
---------------------------------------------------------------*/
.trial .lead {
 margin: 0 auto 60px auto;
}
.trial .campaign01, .trial .campaign02 {
padding: 30px 20px;
 margin: 30px 0 0 0;
}
.trial .campaign01 figure, .trial .campaign02 figure {
 width: 80px;
 height: 80px;
 padding: 20px 0 0 0;
    top: -55px;
    left: -5px;
 font-size: 14px;
}
 .trial .campaign02 .box-wrap {
  flex-direction: column;
 }
 .trial .campaign02 .box-wrap .box {
  width: 100%;
 }
 .trial .campaign02 .box-wrap .box+.box {
  margin: 30px 0 0 0;
 }
/*---------------------------------------------------------------
レッスンの流れ（lesson）
---------------------------------------------------------------*/
.lesson .box {
 width: 100%;
 margin: 0 0 30px 0;
}
.lesson .flex-wrap {
 flex-direction: column;
}
/*---------------------------------------------------------------
	フッター（footer）
---------------------------------------------------------------*/
}
/*==================================
筋膜リリースボールyoutube表示
==================================*/
.youtube-menu li a {
 display: block;
 color: #FFF;
 background: #000;
 padding: 2px 10px;
 margin: 10px 0;
 text-align: center;
 border-radius: 3px;
 cursor: pointer;
}
.youtube-menu li a i {
 vertical-align: bottom;
 font-size: 27px;
}
.youtube-menu li a:hover {
 opacity: 0.8;
 transition: all 0.3s;
}

/*---------------------------------------------------------------
親子でオンライン追加 20201001
---------------------------------------------------------------*/
.oyako {
 background: #fdd35c;
}
.oyako h3 {
 text-align: center;
font-family: 'Kosugi Maru', sans-serif;
 font-size: 28px;
 font-weight: normal;
margin: 0 0 40px 0;
    text-shadow: 1px 1px #FFF;
}
.oyako h3 span {
font-family: 'Kosugi Maru', sans-serif;
 font-size: 36px;
 font-weight: normal;
 padding: 0 5px;
    color: #64aab8;
}
.oyako p {
 width: 80%;
 margin: 0 auto 50px auto;
}
.oyako strong  {
    color: #000;
    margin: 0 0 5px 0;
    display: inline-block;
 border-bottom: 1px dotted #FFF;
}
.oyako .box-wrap {
 display: flex;
 justify-content: space-between;
}
.oyako .txt-box {
 width: 55%;
}
.oyako .img-box {
 width: 40%;
}
.oyako .img-box img {
 width: 100%;
 height: auto;
 border: none;
 padding: 0;
}
.oyako .merit {
 margin: 0 0 15px 0;
}
.oyako .merit h4, .oyako .voice h4 {
 background: #FFF;
 padding: 2px 0 2px 10px;
 margin: 0 0 10px 0;
 color: #64aab8;
 border-radius: 3px;
}
.oyako .merit ul, .oyako .voice ul {
 padding: 0 5px;
}
.oyako .merit li::before {
 font-family: "Font Awesome 5 Free";
 content: "\f14a";
 font-weight: bold;
 color: #64aab8;
 margin: 0 10px 0 0;
 fotn-size: 20px;
 text-shadow: 1px 1px #FFF;
}
.oyako .voice li::before {
 font-family: "Font Awesome 5 Free";
 content: "\f086";
 font-weight: bold;
 color: #64aab8;
 margin: 0 10px 0 0;
 font-size: 20px;
 text-shadow: 1px 1px #FFF;
}
.oyako .option {
 border: 1px solid #FFF;
 padding: 7px 10px;
 margin: 10px 0 0 0;
}
.oyako .option h4 {
 color: #FFF;
 border-bottom: 1px dotted #FFF;
 margin: 0 0 5px 0;
}
@media screen and (max-width: 560px) {
 .oyako h2 {
  font-size: 24px;
 }
 .oyako h3 span {
  font-size: 32px;
 }
 .oyako p {
  width: 90%;
  margin: 0 auto 25px auto;
 }
 .oyako .box-wrap {
  flex-direction: column-reverse;
 }
 .oyako .txt-box, .oyako .img-box {
  width: 100%;
 }
 .oyako .txt-box {
  margin: 10px 0 0 0;
 }
}