@charset "utf-8";
/*
	Description: initial setting
	Version: 1.0
	Author: idealgrow
*/
#baseTit {
    padding: 40px 20px;
    --mask:
        conic-gradient(from 115deg at top, #0000, #000 1deg 129deg, #0000 130deg) top/42.89px 51% repeat-x, conic-gradient(from -65deg at bottom, #0000, #000 1deg 129deg, #0000 130deg) bottom/42.89px 51% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    position: relative;
    z-index: 1;
}
#baseTit.pink {
    background: url("../img/shared/pagetit_base.webp")center center no-repeat, #ec6d81;
    background-size: cover, 100%;
}
#baseTit.green {
    background: url("../img/shared/pagetit_base.webp")center center no-repeat, #DA473A;
    background-size: cover, 100%;
}
#baseTit.features {
    background: url("../img/features/pagetit_features.webp")center center no-repeat;
    background-size: cover, 100%;
}
#baseTit.developer {
    background: url("../img/features/pagetit_column.webp")center center no-repeat;
    background-size: cover, 100%;
}
#baseTit.about {
    background: url("../img/about/pagetit_about.webp")center center no-repeat;
    background-size: cover, 100%;
}
#baseTit.price {
    background: url("../img/price/pagetit_price.webp")center center no-repeat;
    background-size: cover, 100%;
}
#baseTit.pianoGuide {
    background: url("../img/price/pagetit_guide.webp")center center no-repeat;
    background-size: cover, 100%;
}
#baseTit.voice {
    background: url("../img/voice/pagetit_voice.webp")center center no-repeat;
    background-size: cover, 100%;
}
#baseTit.teacher {
    background: url("../img/teacher/pagetit_teacher.webp")center center no-repeat;
    background-size: cover, 100%;
}
#baseTit.faq {
    background: url("../img/faq/pagetit_faq.webp")center center no-repeat;
    background-size: cover, 100%;
}
#baseTit.pink h1, #baseTit.green h1 {
    color: #fff;
    filter: none;
}
#baseTit h1 {
    text-align: center;
    font-weight: bold;
    line-height: 1.6;
    font-size: 28px;
    color: #4e362f;
    filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px -1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(1px -1px 0 #fff) drop-shadow(1px 0px 1px #fff) drop-shadow(-1px -0px 1px #fff) drop-shadow(0px 1px 1px #fff) drop-shadow(0px -1px 1px #fff);
}
#baseTit h1 span {
    font-size: 14px;
    display: block;
    font-family: bely, serif;
    opacity: 0.6;
    letter-spacing: 1.2px;
}
#baseTit h1 img {
    height: 30px;
    display: inline-block;
}
#baseTit.campaign{
	padding: 0;
}
#baseTit.campaign picture img{
	width: 100%;
	height: auto;
}
.dotBg {
    background: url("../img/features/dot_bg.webp")left top, #000;
    background-size: 20px;
    margin-top: -20px;
    padding-top: 20px;
}
.btslice {
    --mask:
        conic-gradient(from -65deg at bottom, #0000, #000 1deg 129deg, #0000 130deg) bottom/42.89px 100%;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}
.baseTit01 {
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 20px;
}
.baseTit01 span {
    font-weight: normal;
    display: block;
    font-size: 14px;
    font-family: bely, serif;
}
#featurePoint {
    padding-bottom: 30px;
}
#featurePoint .pointBox:not(:last-of-type) {
    margin-bottom: 40px;
}
#featurePoint .pointBox figure {
    display: block;
    position: relative;
    height: 240px;
    margin-bottom: 45px;
}
#featurePoint .pointBox figure img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
    height: 240px;
}
#featurePoint .pointBox figure p {
    position: absolute;
    background: #DA473A;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    text-align: center;
    line-height: 1;
    color: #fff;
    font-family: futura-pt-bold, sans-serif;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    font-size: 14px;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
}
#featurePoint .pointBox figure p span {
    display: block;
    font-size: 28px;
}
#featurePoint .pointBox div h3 {
    text-align: center;
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 20px;
}
#featurePoint .pointBox div dl dt {
    position: relative;
    padding-left: 25px;
    font-size: 18px;
    font-weight: bold;
}
#featurePoint .pointBox div dl dt:before {
    content: "";
    width: 8px;
    height: 8px;
    border: solid 4px #DA473A;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 10px;
}
#featurePoint .pointBox div dl dd {
    padding-left: 25px;
}
#featurePoint .pointBox div dl dd:not(:last-of-type) {
    margin-bottom: 20px;
}
#otoiroFactor {
    background: url("../img/shared/bg_musicnote.webp")center center no-repeat;
    background-size: cover;
    margin-top: -20px;
    padding-top: 20px;
}
#otoiroFactor figure {
    display: block;
    padding: 40px 20px;
}
#otoiroFactor figure img {
    width: 100%;
    height: auto;
    max-width: 720px;
    margin: 0 auto;
}
#factor01 {
    position: relative;
    z-index: 2;
    background: #31b697;
    --mask:
        radial-gradient(20.31px at 50% 28.60px, #000 99%, #0000 101%) calc(50% - 26px) 0/52px 51% repeat-x, radial-gradient(20.31px at 50% -15.6px, #0000 99%, #000 101%) 50% 13px/52px calc(51% - 13px) repeat-x, radial-gradient(20.31px at 50% calc(100% - 28.60px), #000 99%, #0000 101%) calc(50% - 26px) 100%/52px 51% repeat-x, radial-gradient(20.31px at 50% calc(100% + 15.60px), #0000 99%, #000 101%) 50% calc(100% - 13px)/52px calc(51% - 13px) repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}
#factor01:before {
    content: "";
    width: 300px;
    height: 300px;
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    left: -120px;
    top: -100px;
    filter: drop-shadow(0px 0px 10px rgba(0, 100, 80, 0.5));
    z-index: -1;
}
#factor01:after {
    content: "";
    width: 100px;
    height: 100px;
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    left: 90px;
    top: 130px;
    filter: drop-shadow(0px 0px 10px rgba(0, 100, 80, 0.5));
    z-index: -1;
}
#factor01 .contentIn:before {
    content: "";
    width: 220px;
    height: 220px;
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    right: -100px;
    top: 180px;
    filter: drop-shadow(0px 0px 10px rgba(0, 100, 80, 0.5));
    z-index: -1;
}
#factor01 .contentIn:after {
    content: "";
    width: 400px;
    height: 400px;
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    right: 90px;
    bottom: -80px;
    filter: drop-shadow(0px 0px 10px rgba(0, 100, 80, 0.5));
    z-index: -1;
}
#factor01 .contentIn {
    padding: 60px 20px;
    position: relative;
    z-index: 5;
}
#factor01 #fact01_txt {
    margin-bottom: 30px;
}
#factor01 #fact01_txt h2 {
    font-weight: bold;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 20px;
}
#factor01 #fact01_txt h2 span, #factor02 h2 span {
    font-family: futura-pt-bold, sans-serif;
    display: block;
    font-size: 20px;
}
#factor01 #fact01_txt p {
    color: #fff;
}
#factor01 figure {
    display: flex;
    align-items: flex-start;
}
#factor01 figure img {
    width: 100%;
    border-radius: 10px;
}
#factor01 figure div {
    width: 48%;
    position: relative;
}
#factor01 figure div:after {
    content: "";
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    border-radius: 10px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
}
#factor01 figure div:last-of-type {
    margin-left: 4%;
    margin-top: 20px;
}
#factor01 #fact01_btn {
    margin-top: 30px;
    z-index: 10;
}
#factor02 {
    position: relative;
    margin-top: -20px;
    padding-top: 20px;
    background: #fee9bc;
    --mask:
        radial-gradient(20.31px at 50% calc(100% - 28.60px), #000 99%, #0000 101%) calc(50% - 26px) 0/52px 100%, radial-gradient(20.31px at 50% calc(100% + 15.60px), #0000 99%, #000 101%) 50% calc(100% - 13px)/52px 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}
#factor02 .contentIn {
    padding: 40px 20px 80px 20px;
    position: relative;
}
#factor02 h2 {
    font-weight: bold;
    color: #ff8400;
    line-height: 1.4;
    margin-bottom: 20px;
}
#factor02:before {
    content: "";
    width: 400px;
    height: 400px;
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    left: -130px;
    top: -300px;
    filter: drop-shadow(0px 0px 10px rgba(255, 190, 110, 0.5));
    z-index: -1;
}
#factor02:after {
    content: "";
    width: 100px;
    height: 100px;
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    left: 50px;
    top: 50px;
    filter: drop-shadow(0px 0px 10px rgba(255, 190, 110, 0.5));
    z-index: -1;
}
#factor02 .contentIn:before {
    content: "";
    width: 220px;
    height: 220px;
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    right: -100px;
    top: 180px;
    filter: drop-shadow(0px 0px 10px rgba(255, 190, 110, 0.5));
    z-index: -1;
}
#factor02 .contentIn:after {
    content: "";
    width: 400px;
    height: 400px;
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    right: 90px;
    bottom: -80px;
    filter: drop-shadow(0px 0px 10px rgba(255, 190, 110, 0.5));
    z-index: -1;
}
#factor02 .fact02_box {
    margin-bottom: 30px;
}
#factor02 .fact02_box figure {
    display: block;
    position: relative;
    margin-bottom: 30px;
}
#factor02 .fact02_box figure:after {
    content: "";
    background: #fff;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    position: absolute;
    right: -10px;
    bottom: -10px;
    z-index: -1;
}
#factor02 .fact02_box figure img {
    width: 100%;
    border-radius: 10px;
}
#factor02 .fact02_box h3 {
    font-weight: bold;
    font-size: 20px;
    padding-left: 30px;
    position: relative;
    margin-bottom: 15px;
}
#factor02 .fact02_box h3:before {
    content: "";
    background: url("../img/shared/nav_active.webp")center center no-repeat;
    background-size: 100%;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 0;
    top: 5px;
}
#fact02_info {
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 40px;
}
#fact02_info > .info:first-of-type {
    border-bottom: dotted 2px #4e362f;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
#fact02_info .info h4 {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 15px;
}
#fact02_info .report {
    background: #fff9eb;
    border-radius: 10px;
    margin-top: 30px;
    padding: 15px;
}
#fact02_info .report h5 {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
}
#fact02_info .report h5 span {
    font-size: 14px;
    display: block;
}
#fact02_info .report h5 span.history {
    display: inline-block;
    background: #fff;
    border-radius: 5px;
    padding: 0 10px;
    border: solid 1px #715d55;
    font-size: 14px;
    margin-left: 10px;
    vertical-align: middle;
    margin-bottom: 5px;
}
#fact02_info .reportList > li {
    background: #fff;
    border-radius: 50px;
    box-shadow: 1.147px 1.638px 0px 0px rgba(0, 0, 0, 0.11);
    display: flex;
    padding: 5px 15px;
}
#fact02_info .reportList > li:not(:last-of-type) {
    margin-bottom: 10px;
}
#fact02_info .reportList > li p {
    width: 115px;
}
#fact02_info .reportList > li ol {
    display: flex;
    margin-left: 5px;
    width: calc(100% - 120px);
}
#fact02_info .reportList > li ol li {
    color: #34b697;
    position: relative;
}
#fact02_info .reportList > li ol li:last-of-type {
    color: #f6ab00;
    margin-left: 20px;
}
#fact02_info .reportList > li ol li:last-of-type:before {
    content: "";
    background: url("../img/features/ico_arrow.webp")center center no-repeat;
    width: 8px;
    height: 8px;
    position: absolute;
    background-size: 100%;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
}
#fact02_info .reportList + p {
    font-size: 14px;
    margin-top: 10px;
}
#fact02_info .reportFigure {
    margin-top: 20px;
}
#fact02_info .reportFigure img {
    width: 100%;
    height: auto;
}
#fact02_info .reportFigure li:first-of-type {
    margin-bottom: 50px;
    position: relative;
}
#fact02_info .reportFigure li:first-of-type:after {
    content: "";
    background: url("../img/features/figure_arrow.webp")center center no-repeat;
    width: 30px;
    height: 30px;
    position: absolute;
    background-size: 100%;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    bottom: -40px;
}
#factor02 .btn {
    max-width: 500px;
    margin: 0 auto;
}
#featureEx {
    margin-top: -20px;
    padding-top: 20px;
    background: url("../img/features/muken_bg.webp")top center no-repeat;
    background-size: 100%;
}
#featureEx .featureExBox01 > ul.img {
    display: flex;
    align-items: flex-end;
}
#featureEx .featureExBox01 > ul.img li:first-of-type {
    order: 2;
    width: 70%;
}
#featureEx .featureExBox01 > ul.img li:last-of-type {
    width: 30%;
}
#featureEx .featureExBox01 > ul.img li img {
    width: 100%;
}
#featureEx .featureExBox01 h2, #featureEx .featureExBox02 h2 {
    font-weight: bold;
    padding: 20px 0;
    font-size: 22px;
}
#featureEx .featureExBox01 h2 + p, #featureEx .featureExBox02 h2 + p {
    margin-bottom: 20px;
}
#featureEx .featureExBox01 a {
    color: #3db797;
    font-weight: bold;
    padding-left: 30px;
    display: block;
    position: relative;
}
#featureEx .featureExBox01 a:before {
    content: "";
    background: url("../img/shared/btn_arrow_gn.webp")center center no-repeat;
    background-size: 100%;
    width: 28px;
    height: 28px;
    position: absolute;
    left: 0;
    top: 2px;
}
#featureEx .featureExBox02 {
    margin-top: 40px;
}
#featureEx .featureExBox02 ul li:not(:last-of-type) {
    margin-bottom: 20px;
}
#featureEx .featureExBox02 ul li img {
    width: 100%;
    border-radius: 10px;
}
#featureEx .featureExBox02 ul li figure {
    display: block;
    position: relative;
    margin-bottom: 20px;
}
#featureEx .featureExBox02 ul li figure:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 10px;
    position: absolute;
    right: -10px;
    bottom: -10px;
    background: #ededed;
    z-index: -1;
}
#featureEx .featureExBox02 ul li h3 {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 18px;
}
.devAnchor {
    border-bottom: dotted 2px #4e362f;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.devAnchor li:not(:last-of-type) {
    margin-bottom: 15px;
}
.devAnchor li a {
    display: block;
    border: solid 2px #4e362f;
    border-radius: 5px;
    padding: 15px 15px 15px 45px;
    color: #4e362f;
    font-weight: bold;
    position: relative;
}
.devAnchor li a:before {
    content: "";
    background: url("../img/shared/anchor_link.webp")center center no-repeat;
    background-size: 100%;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.columnBox:first-of-type {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: dotted 2px #4e362f;
}
.columnBox h2 {
    font-weight: bold;
    font-size: 26px;
    line-height: 1.4;
    margin-bottom: 20px;
}
.columnBox h2 span {
    font-size: 20px;
    display: block;
}
.columnBox p:not(:last-of-type) {
    margin-bottom: 30px;
}
.columnBox h3 {
    font-weight: bold;
    font-size: 20px;
    color: #DA473A;
    margin-bottom: 10px;
}
.columnBox .profile {
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    margin-top: 30px;
}
.columnBox .profile figure {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    margin: 20px auto 30px auto;
}
.columnBox .profile figure img {
    width: 100%;
    height: auto;
}
.columnBox .profile h4 {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 20px;
}
.columnBox .profile h4 span {
    display: block;
    font-size: 24px;
}
.columnBox h4 {
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
}
.columnBox ul li {
    padding-left: 20px;
    border-left: solid 2px #74c7b3;
}
.columnBox ul li a {
    word-break: break-all;
    color: #DA473A;
}
.columnBox ul li:not(:last-of-type) {
    margin-bottom: 20px;
}
#aboutCatch {
    font-weight: bold;
    line-height: 1.6;
    text-align: center;
    font-size: 20px;
    padding: 20px;
}
#aboutCatch + p {
    padding: 0 20px 120px 20px;
}
#aboutCatch + p a {
    color: #DA473A;
}
#aboutList {
    position: relative;
    background: #f4f4f4;
}
#aboutList:before {
    content: "";
    background: url("../img/about/bg_ark.svg")top center no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 20px;
    top: -20px;
    z-index: -1;
}
#aboutList:after {
    content: "";
    background: url("../img/about/illust_01.webp")center center no-repeat;
    background-size: 100%;
    width: 140px;
    height: 83px;
    position: absolute;
    left: 50%;
    top: -80px;
    transform: translateX(-50%);
}
#aboutList h2, #priceContent h2, #pianoType h2 {
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px;
}
#aboutList h2 span, #priceContent h2 span, #pianoType h2 span {
    display: block;
    font-size: 16px;
    font-family: bely, serif;
}
#aboutList ol li {
    border-radius: 10px;
    background: #fff;
    box-shadow: 2.294px 3.277px 4px 0px rgba(0, 0, 0, 0.09);
    position: relative;
}
#aboutList ol li:not(:last-of-type) {
    margin-bottom: 30px;
}
#aboutList ol li figure {
    border-radius: 10px 10px 0 0;
    width: 100%;
    height: 200px;
    --mask:
        radial-gradient(20.31px at 50% calc(100% - 28.60px), #000 99%, #0000 101%) calc(50% - 26px) 0/52px 100%, radial-gradient(20.31px at 50% calc(100% + 15.60px), #0000 99%, #000 101%) 50% calc(100% - 13px)/52px 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}
#aboutList ol li figure img {
    height: 200px;
    width: 100%;
    object-fit: cover;
}
#aboutList ol li h3 {
    position: relative;
    text-align: center;
    font-weight: bold;
    font-size: 22px;
    padding: 10px 0 20px 0;
}
#aboutList ol li h3:before {
    content: "";
    background: url("../img/about/ico_step01.webp")center center no-repeat;
    background-size: 100%;
    width: 70px;
    height: 70px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -50px;
}
#aboutList ol li:nth-of-type(2) h3:before {
    background: url("../img/about/ico_step02.webp")center center no-repeat;
    background-size: 100%;
}
#aboutList ol li:nth-of-type(3) h3:before {
    background: url("../img/about/ico_step03.webp")center center no-repeat;
    background-size: 100%;
}
#aboutList ol li:nth-of-type(3) h3:after {
    content: "希望者のみ";
    position: absolute;
    right: 15px;
    top: -25px;
    font-size: 14px;
    background: #DA473A;
    color: #fff;
    padding: 0 10px;
    border-radius: 50px;
}
#aboutList ol li:nth-of-type(4) h3:before {
    background: url("../img/about/ico_step04.webp")center center no-repeat;
    background-size: 100%;
}
#aboutList ol li:nth-of-type(5) h3:before {
    background: url("../img/about/ico_step05.webp")center center no-repeat;
    background-size: 100%;
}
#aboutList ol li:nth-of-type(5):after {
    content: "";
    background: url("../img/about/txt_lessonstart.webp")center center no-repeat;
    background-size: 100%;
    position: absolute;
    width: 80px;
    height: 54px;
    right: -20px;
    top: -20px;
}
#aboutList ol li h3 span {
    position: relative;
}
#aboutList ol li p {
    padding: 0 20px 20px 20px;
}
#aboutList ol li a.lineBtn {
    margin: 0 20px 20px 20px;
}
#aboutList ol li p a {
    color: #DA473A;
}
.banarArea {
    max-width: 800px;
    margin: 40px auto 0 auto;
}
.banarArea img {
    width: 100%;
    height: auto;
}
#priceContent {
    position: relative;
    background: #FBEAD6;
}
#priceContent:before {
    content: "";
    background: url("../img/price/bg_ark.svg")top center no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 20px;
    top: -20px;
    z-index: -1;
}
#priceContent .contentIn {
    position: relative;
    z-index: 1;
}
#priceContent .contentIn:before {
    content: "";
    background: url("../img/features/circle_orange.webp")top center no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -20px;
    left: 0;
    z-index: -1;
}
#pianoType {
    position: relative;
    background: #f4f4f4;
}
#pianoType:before {
    content: "";
    background: url("../img/about/bg_ark.svg")top center no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 20px;
    top: -20px;
    z-index: -1;
}
#pianoType:after {
    content: "";
    background: url("../img/price/illust_02.webp")center center no-repeat;
    background-size: 100%;
    width: 120px;
    height: 92px;
    position: absolute;
    left: 50%;
    top: -90px;
    transform: translateX(-50%);
}
#pianoType .contentIn{
	padding-bottom: 60px;
}
#priceSet {
    padding: 40px 20px 50px;
}
#priceSet .addfee {
    background: #ffefee;
    border-radius: 10px;
    padding-bottom: 20px;
    margin-bottom: 30px;
}
#priceSet .lessonfeeIn {
    background: #f5f5f5;
    border-radius: 10px;
    padding: 30px 15px 15px 15px;
    position: relative;
}
#priceSet .lessonfeeIn:before {
    content: "";
    background: url("../img/price/ico_plus.webp")center center no-repeat;
    background-size: 100%;
    height: 40px;
    width: 40px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -20px;
}
#priceSet .lessonfeeIn + p {
    margin-top: 10px;
    font-family: futura-pt-bold, source-han-sans-japanese, 'Helvetica Neue', 'Arial', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}
#priceSet .addfee h2 {
    background: #DA473A;
    color: #fff;
    border-radius: 10px 10px 0 0;
    padding: 10px 10px 20px 10px;
    text-align: center;
    font-weight: bold;
    font-size: 22px;
}
#priceSet .addfee .campaign {
    position: relative;
}
#priceSet .addfee .campaign ul {
    display: flex;
    background: #fff;
    border-radius: 10px;
    position: absolute;
    left: 20px;
    right: 20px;
    top: -25px;
    padding: 5px 10px;
    box-shadow: 4.015px 5.734px 3px 0px rgba(0, 0, 0, 0.09);
}
#priceSet .addfee .campaign ul:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #fff transparent transparent transparent;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    position: absolute;
}
#priceSet .addfee .campaign ul li:first-of-type {
    font-weight: bold;
    color: #DA473A;
    font-family: futura-pt-bold, sans-serif;
    font-size: 20px;
    line-height: 1.4;
    width: 48%;
}
#priceSet .addfee .campaign ul li:last-of-type {
    text-align: right;
    padding-right: 20px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    width: 52%;
    position: relative;
}
#priceSet .addfee .campaign ul li:last-of-type:after {
    content: "";
    background: url("../img/price/illust_01.webp")center center no-repeat;
    background-size: 100%;
    width: 53px;
    height: 60px;
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
}
#priceSet .addfee .campaign ul li span {
    display: block;
    font-size: 20px;
}
#priceSet .addfee .price {
    padding: 20px 0 0 0;
    text-align: center;
    font-size: 20px;
    line-height: 1;
    font-family: futura-pt-bold, source-han-sans-japanese, 'Helvetica Neue', 'Arial', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    font-weight: bold;
    color: #DA473A;
}
#priceSet .addfee .price .through {
    position: relative;
}
#priceSet .addfee .price .through:before {
    content: "";
    width: 100%;
    height: 4px;
    border-top: solid 2px #DA473A;
    border-bottom: solid 2px #DA473A;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
#priceSet .addfee .price .num {
    font-size: 30px;
}
#priceSet .addfee > p:last-of-type {
    text-align: center;
    margin-top: 5px;
}
#priceSet .addfee > p:last-of-type span {
    background: #DA473A;
    color: #fff;
    padding: 0 10px;
    border-radius: 5px;
}
#priceSet .lessonfeeIn div {
    background: #fff;
    border-radius: 10px;
}
#priceSet .lessonfeeIn div:last-of-type {
    margin-top: 20px;
}
#priceSet .lessonfeeIn div h3 {
    padding: 10px 10px 15px 10px;
    text-align: center;
    font-weight: bold;
    font-family: futura-pt-bold, source-han-sans-japanese, 'Helvetica Neue', 'Arial', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    color: #fff;
    border-radius: 10px 10px 0 0;
    background: #a1a1a1;
}
#priceSet .lessonfeeIn div:first-of-type h3 {
    background: #ec6d81;
}
#priceSet .lessonfeeIn div ul {
    display: flex;
    padding: 20px;
    align-items: center;
}
#priceSet .lessonfeeIn div ul li {
    font-family: futura-pt-bold, source-han-sans-japanese, 'Helvetica Neue', 'Arial', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    line-height: 1;
}
#priceSet .lessonfeeIn div ul li:first-of-type span {
    font-size: 20px;
}
#priceSet .lessonfeeIn div ul li:last-of-type {
    background: #ff6a81;
    color: #fff;
    font-size: 18px;
    padding: 5px 10px;
    border-radius: 5px;
    margin-left: auto;
    position: relative;
}
#priceSet .lessonfeeIn div ul li:last-of-type span {
    font-size: 14px;
}
#priceSet .lessonfeeIn div ul li:last-of-type:before {
    content: "";
    background: url("../img/price/ico_arrow.webp")center center no-repeat;
    width: 23px;
    height: 20px;
    background-size: 100%;
    position: absolute;
    left: -30px;
}
#priceContent .lessonHead {
    margin-bottom: 40px;
}
#priceContent .lessonHead figure {
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}
#priceContent .lessonHead figure:after {
    content: "";
    width: 100%;
    height: 100%;
    border: solid 1px #b3a093;
    position: absolute;
    right: -5px;
    top: 0;
    border-radius: 10px;
    transform: rotate(3deg);
    z-index: -1;
}
#priceContent .lessonHead figure img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: solid 1px #b3a093;
}
#priceContent .lessonHead h3 {
    font-weight: bold;
    font-size: 18px;
    padding-left: 50px;
    position: relative;
    margin-bottom: 10px;
}
#priceContent .lessonHead h3:before {
    content: "";
    background: url("../img/price/ico_piano.webp")center center no-repeat, #DA473A;
    background-size: 80%;
    width: 40px;
    height: 40px;
    position: absolute;
    border-radius: 50%;
    left: 0;
}
#priceContent .lessonHead table {
    border-collapse: collapse;
    width: 100%;
}
#priceContent .lessonHead table th {
    text-align: left;
    color: #DA473A;
    width: 40%;
    padding: 5px;
}
#priceContent .lessonHead table td {
    width: 60%;
    padding: 5px;
}
#priceContent .lessonHead table tr:not(:last-of-type) {
    border-bottom: dotted 2px #ffce97;
}

#priceContent .lessonHead .lessonHead__note {
    margin-top: 10px;
    font-size: 13px;
    font-weight: bold;
}

#priceContent .lessonPrice {
    border-bottom: dashed 2px #f6d4ac;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
#priceContent .lessonPrice h3, #priceContent .prepar h3 {
    font-weight: bold;
    padding-left: 30px;
    position: relative;
    margin-bottom: 10px;
}
#priceContent .lessonPrice h3:before {
    content: "";
    background: url("../img/price/ico_price.webp")center center no-repeat;
    background-size: 100%;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
#priceContent .prepar h3:before {
    content: "";
    background: url("../img/price/ico_note.webp")center center no-repeat;
    background-size: 100%;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
#priceContent .lessonPrice h3 span {
    font-size: 14px;
}
#priceContent .lessonPrice h3 + p {
    margin-bottom: 30px;
}
#priceContent .lessonPrice .price-table-support {
    width: 100%;
    border-collapse: collapse;
}
#priceContent .lessonPrice .price-table-support tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 30px;
}
#priceContent .lessonPrice .price-table-support th {
    display: block;
    text-align: left;
    vertical-align: top;
    padding-top: 10px;
    font-size: 16px;
    margin-right: 2%;
}
#priceContent .lessonPrice .price-table-support td {
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    font-family: futura-pt-bold, source-han-sans-japanese, 'Helvetica Neue', 'Arial', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #DA473A;
    line-height: 1.5;
}
#priceContent .lessonPrice .campaignFloat span{
	display: block;
	font-size: 20px;
	color: #fff;
}

#priceContent .lessonPrice .note {
    margin-top: 20px;
    font-size: 14px;
}
#priceContent .lessonPrice .note li:not(:last-of-type) {
    margin-bottom: 10px;
}
#priceContent .prepar ul {
    background: #fff;
    border-radius: 10px;
    padding: 15px;
}
#priceContent .prepar ul li:not(:last-of-type) {
    margin-bottom: 20px;
}
#priceContent .prepar ul li h4 {
    font-weight: bold;
    font-size: 16px;
    padding-left: 20px;
    position: relative;
    margin-bottom: 10px;
}
#priceContent .prepar ul li h4:before {
    content: "";
    background: url("../img/price/ico_check.webp")center center no-repeat;
    background-size: 100%;
    width: 18px;
    height: 18px;
    position: absolute;
    left: 0;
    top: 7px;
}
#priceContent .prepar ul li p {
    padding-left: 20px;
}
#priceContent .prepar ul li a {
    margin-top: 10px;
    padding: 10px;
}
#pianoType h2{
	margin-bottom: 10px;
}
#pianoType h2 + p{
	text-align: center;
	margin-bottom: 30px;
}
#pianoType ul{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
#pianoType ul li{
	width: 48%;
	margin-bottom: 10px;
}
#pianoType ul li img{
	width: 100%;
	height: auto;
}
#pianoType ul li figure figcaption{
	text-align: center;
	font-weight: bold;
}
#pianoType ul li:nth-of-type(odd){
	margin-right: 4%;
}
#teacherList ul li figure img{
	width: 100%;
	height: auto;
	border-radius: 40px;
	border: solid 1px #4e362f;
}
#teacherList ul li figure{
	margin-bottom: 10px;
}
#teacherList ul li figure figcaption{
	padding: 20px;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
}
#pianoSpec{
	margin-top: -20px;
    position: relative;
    z-index: 2;
    background: #31b697;
    --mask:
        radial-gradient(20.31px at 50% 28.60px, #000 99%, #0000 101%) calc(50% - 26px) 0/52px 51% repeat-x, radial-gradient(20.31px at 50% -15.6px, #0000 99%, #000 101%) 50% 13px/52px calc(51% - 13px) repeat-x, radial-gradient(20.31px at 50% calc(100% - 28.60px), #000 99%, #0000 101%) calc(50% - 26px) 100%/52px 51% repeat-x, radial-gradient(20.31px at 50% calc(100% + 15.60px), #0000 99%, #000 101%) 50% calc(100% - 13px)/52px calc(51% - 13px) repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}
#pianoSpec .contentIn{
	padding: 60px 20px;
}
#pianoSpec figure{
	position: relative;
	margin-bottom: 40px;
}
#pianoSpec figure:after{
	content: "";
	background: #fff;
	border-radius: 10px;
	width: 100%;
	height: 100%;
	position: absolute;
	right: -10px;
	bottom: -10px;
	z-index: -1;
}
#pianoSpec figure img{
	width: 100%;
	height: auto;
	border-radius: 10px;
}
#pianoSpec h2{
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 20px;
	color: #fff;
}
#pianoSpec h2 span{
	background-image: radial-gradient(circle at center, #fff 20%, transparent 20%);
  background-position: top right;
  background-repeat: repeat-x;
  background-size: 1em 0.3em;
  padding-top: .4em;
}
#pianoSpec p{
	color: #fff;
}
#pianoSpec ul{
	margin: 20px 0;
}
#pianoSpec ul li{
	background: #fff;
	padding: 15px 20px;
	border-radius: 50px;
	text-align: center;
	font-weight: bold;
	color: #DA473A;
}
#pianoSpec ul li:not(:last-of-type){
	margin-bottom: 10px;
}
#pianoAdvise{
	background: #f4f4f4;
	margin-top: -20px;
	padding-top: 30px;
}
#pianoAdvise .head{
	position: relative;
	padding-top: 100px;
	text-align: center;
	margin-bottom: 30px;
}
#pianoAdvise .head h2{
	font-weight: bold;
}
#pianoAdvise .head:before{
	content: "";
	background:url("../img/price/ico_buyguide.webp")center center no-repeat,#fff;
	background-size: 80%;
	width: 90px;
	height: 90px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	border-radius: 50%;
  box-shadow: 1.147px 1.638px 4px 0px rgba(0, 0, 0, 0.1);
}
#pianoAdvise ul + p{
	margin-top: 30px;
}
#pianoAdvise ul li figure img{
	width: 100%;
	height: auto;
}
#pianoAdvise ul li {
	background: #fff;
	padding: 20px;
	border-radius: 10px;
  box-shadow: 1.147px 1.638px 4px 0px rgba(0, 0, 0, 0.2);
}
#pianoAdvise ul li:not(:last-of-type){
	margin-bottom: 20px;
}
#pianoAdvise ul li .pointNum span{
	background: #DA473A;
	color: #fff;
	padding: 3px 20px;
	border-radius: 50px;
	font-family: futura-pt-bold, sans-serif; 
}
#pianoAdvise ul li h3{
	font-weight: bold;
	font-size: 22px;
	margin-bottom: 20px;
}
#voiceList{
	background: url("../img/shared/voice_bg.webp")top center no-repeat;
	background-size: cover;
	padding: 0 20px 60px 20px;
}
#voiceList h2{
	padding: 20px 0;
}
#voiceList h2 + p{
	padding: 0 0 30px 0;
}
#voiceList .voiceBox{
	margin-top: 0;
}
#teacherList{
	background: url("../img/teacher/main_bg.webp")top center no-repeat;
	background-size: cover;
}
#teacherList h2 + p,#faqList h2 + p{
	padding-bottom: 20px;
}
#teacherList ul li{
	margin-bottom:40px;
	padding-bottom: 40px;
	border-bottom: dotted 1px #ddd;
}
#teacherList ul li figure figcaption{
	padding: 20px;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
}
#teacherList ul li div h3 span{
	color: #DA473A;
	font-size: 14px;
	padding-bottom: 3px;
	border-bottom: dotted 3px #DA473A;
}
#teacherList ul li div h3 {
	margin-bottom: 10px;
}
#teacherList ul li div p + h3{
	margin-top: 20px;
}
#faqList ul li{
	background: #fff;
	padding: 15px;
	border-radius: 10px;
  box-shadow: 0px 0px 7.84px 0.16px rgba(0, 0, 0, 0.15);
}
#faqList ul li:not(:last-of-type){
	margin-bottom: 20px;
}
#faqList ul li h3{
	font-weight: bold;
	color: #DA473A;
	font-size: 16px;
	padding-left: 34px;
	position: relative;
}
#faqList ul li h3:before{
    font-family: futura-pt-bold, sans-serif;
	content: "Q";
	background: #DA473A;
	width: 28px;
	height: 28px;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 3px;
	border-radius: 50%;
	line-height: 1;
	font-size: 18px;
}
#faqList ul li p{
	background: #f0f0f0;
	border-radius: 10px;
	padding: 15px;
	margin-top: 20px;
	display: none;
}
#campaignMerit{
	background: url("../img/campaign/merit_bg.webp")center center no-repeat;
	background-size: cover;
	padding: 40px 20px;
}
#campaignMerit p:first-of-type{
	font-size: 18px;
}
#campaignMerit p:first-of-type br:first-of-type{
	display: none;
}
#campaignMerit ul{
	margin: 40px 0;
	padding: 20px;
}
#campaignMerit ul li{
	position: relative;
}
#campaignMerit ul li:first-of-type:before{
	content: "";
	background: url("../img/campaign/ico_01.webp")center center no-repeat;
	background-size: 100%;
	width: 100px;
	height: 75px;
	position: absolute;
	left: -20px;
	top: -40px;
}
#campaignMerit ul li:first-of-type:after{
	content: "or";
	font-size: 50px;
    font-family: futura-pt-bold, sans-serif;
	position: absolute;
	text-align: center;
	width: 100%;
	bottom: -70px;
}
#campaignMerit ul li:nth-of-type(2):before{
	content: "";
	background: url("../img/campaign/ico_02.webp")center center no-repeat;
	background-size: 100%;
	width: 120px;
	height: 107px;
	position: absolute;
	right: -20px;
	top: -30px;
}
#campaignMerit ul li:first-of-type{
	margin-bottom: 60px;
}
#campaignMerit ul li img{
	width: 100%;
	height: auto;
}
#campaignMerit .campaignTime .tit{
	position: absolute;
	left: 0;
	top: -30px;
	color: #DA473A;
	text-align: center;
	width: 100%;
}
#campaignMerit .campaignTime .tit:before{
	content: "";
	background: url("../img/campaign/campaign_tit.webp")center center no-repeat;
	background-size: 100%;
	width: 11px;
	height: 18px;
	display: inline-block;
	vertical-align: bottom;
	margin: 0 3px 5px 0;
}
#campaignMerit .campaignTime .tit:after{
	content: "";
	background: url("../img/campaign/campaign_tit.webp")center center no-repeat;
	background-size: 100%;
	width: 11px;
	height: 18px;
	display: inline-block;
	vertical-align: bottom;
	margin: 0 0 5px 3px;
	transform: scale(-1,1);
}
#campaignMerit .campaignTime{
	position: relative;
	background: #DA473A;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	padding:10px 14px;
	border-radius: 30px;
	line-height: 1.4;
	text-align: center;
    font-family: futura-pt-bold,source-han-sans-japanese, 'Helvetica Neue', 'Arial', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}
#campaignMerit .campaignTime .day{
	font-size:16px;
}
#campaignFlow{
	background: url("../img/campaign/flow_bg.webp")left top;
	margin-top: -20px;
	padding: 20px 0 60px 0;
}
#campaignFlow ol{
	background: #fff;
	border-radius: 10px;
	padding:30px 20px 20px 20px;
	margin-bottom: 20px;
}
#campaignFlow ol li{
	background: #fff2f4;
	position: relative;
	padding: 20px;
}
#campaignFlow ol li:not(:last-of-type){
	margin-bottom: 30px;
}
#campaignFlow ol li .tit{
	width: 100%;
	text-align: center;
    font-family: futura-pt-bold, sans-serif;
	font-size: 24px;
	position: absolute;
	left: 0;
	top: -30px;
}
#campaignFlow ol li .tit span{
	font-size: 30px;
	color: #ed7486;
}
#springCampaign {
	padding: 20px;
	border: solid 2px #F56F90;
	border-radius: 5px;
	margin: 20px 10px 0 10px;
}
#springCampaign h2{
	font-weight: bold;
	text-align: center;
	line-height: 1.6;
	color: #f56f90;
	margin-bottom: 10px;
}
#springCampaign h2 span{
	font-size: 28px;
	background: linear-gradient(to top, #ffa800 0%, #dec057 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#springCampaign ul{
	margin-bottom: 20px;
}
#springCampaign ul li{
	background: #fff;
	border-radius: 5px;
	text-align: center;
	padding: 10px;
    box-shadow: 1.147px 1.638px 0px 0px rgba(0, 0, 0, 0.11);
	font-weight: bold;
	font-size: 18px;
	border: solid 2px #F56F90;
	line-height: 1.4;
}
#springCampaign ul li span{
	font-size: 22px;
	color: #F56F90;
	display: block;
}
#springCampaign ul li:not(:first-of-type){
	margin-top: 10px;
}
#springCampaign time{
	display: block;
	text-align: center;
	border-top: dotted 1px #ccc;
	border-bottom: dotted 1px #ccc;
	padding: 10px 0;
	font-weight: bold;
}
/** summer add **/
#springCampaign.summer{
	border: solid 2px #679c07;
}
#springCampaign.summer h2{
	color:#679c07;
}
#springCampaign.summer h2 span{
	background: linear-gradient(to top, #ffa800 0%, #ff7800 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#springCampaign.summer ul li{
	border: solid 2px #679c07;
}
#springCampaign.summer ul li span{
	color:#679c07;
}
#priceSet .addfee .campaign .bubbleIn {
	background: #fff;
	padding: 10px !important;
	border-radius: 10px;
	margin: 10px 10px 0 10px;
	font-size: 14px;
	text-align: center;
	font-weight: bold;
    box-shadow: 1.147px 1.638px 0px 0px rgba(0, 0, 0, 0.11);
	position: relative;
}
#priceSet .addfee .campaign .bubbleIn span{
	color: #FF9619;
}
#priceSet .addfee .campaign .bubbleIn:after{
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 10px solid #fff;
  border-bottom: 0;
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -10px;
    filter:drop-shadow(1.147px 1.638px 0px rgba(0, 0, 0, 0.11));
}
#priceContent .lessonPrice .price-table-support .campaignFloat.summer{
	background: #679C07;
}
#priceContent .lessonPrice .price-table-support .campaignFloat.summer span span{
	color:#FFCE00;
}
#priceContent .lessonPrice .price-table-support .campaignFloat.summer:after{
  border-top: 14px solid #679C07;
}
@media screen and (min-width: 1079px) {
    #baseTit {
        padding: 140px 40px;
        --mask:
            conic-gradient(from 120deg at top, #0000, #000 1deg 119deg, #0000 120deg) top/40px 51% repeat-x, conic-gradient(from -60deg at bottom, #0000, #000 1deg 119deg, #0000 120deg) bottom/40px 51% repeat-x;
        -webkit-mask: var(--mask);
        mask: var(--mask);
    }
    #baseTit h1 {
        font-size: 48px;
    }
    #baseTit h1 span {
        font-size: 24px;
    }
    #baseTit h1 img {
        height: 54px;
        display: inline-block;
    }
#baseTit.campaign{
	padding: 0;
	background: url("../img/campaign/main_bg.webp")center bottom no-repeat;
	background-size: cover;
	height: 540px;
	position: relative;
}
	#baseTit.campaign picture{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 632px;
	}
#baseTit.campaign picture img{
	width: 100%;
	height: auto;
}
    .baseTit01 {
        font-size: 36px;
        margin-bottom: 40px;
    }
    .baseTit01 span {
        font-size: 18px;
    }
    .dotBg {
        background: url("../img/features/dot_bg.webp")left top, #000;
        background-size: 35px;
        margin-top: -20px;
        padding-top: 20px;
    }
    .btslice {
        --mask:
            conic-gradient(from -60deg at bottom, #0000, #000 1deg 119deg, #0000 120deg) bottom/40px 100%;
        -webkit-mask: var(--mask);
        mask: var(--mask);
    }
    #featurePoint {
        padding-bottom: 40px;
    }
    #featurePoint .pointBox:not(:last-of-type) {
        margin-bottom: 60px;
    }
    #featurePoint .pointBox {
        display: flex;
    }
    #featurePoint .pointBox figure {
        width: 380px;
        height: 400px;
        margin-bottom: 0;
        margin-right: 50px;
    }
    #featurePoint .pointBox figure img {
        width: 100%;
        height: 400px;
    }
    #featurePoint .pointBox figure p {
        top: 20px;
        right: -35px;
        bottom: auto;
        left: auto;
        transform: none;
    }
    #featurePoint .pointBox div {
        width: calc(100% - 350px);
        padding-top: 32px;
    }
    #featurePoint .pointBox div h3 {
        text-align: left;
        font-size: 26px;
    }
    #otoiroFactor figure {
        display: block;
        padding: 100px 20px;
    }
    #factor01 {
        background: url("../img/features/circle_green.webp")center top no-repeat, #31b697;
        position: relative;
    }
    #factor01:before, #factor01:after, #factor01 .contentIn:before, #factor01 .contentIn:after, #factor02:before, #factor02:after, #factor02 .contentIn:before, #factor02 .contentIn:after {
        display: none;
    }
    #factor01 .contentIn {
        padding: 90px 20px;
        display: flex;
        flex-wrap: wrap;
        position: relative;
    }
    #factor01 #fact01_txt {
        margin-bottom: 0;
        width: 550px;
        margin-right: 30px;
    }
    #factor01 #fact01_txt h2, #factor02 h2 {
        font-size: 34px;
    }
    #factor01 #fact01_txt h2 span, #factor02 h2 span {
        font-size: 28px;
    }
    #factor01 figure {
        width: calc(100% - 580px);
        display: flex;
        align-items: flex-start;
    }
    #factor01 figure div {
        width: 47%;
        position: relative;
    }
    #factor01 figure div:after {
        right: -15px;
        bottom: -15px;
    }
    #factor01 figure div:last-of-type {
        margin-left: 6%;
        margin-top: 40px;
    }
    #factor01 #fact01_btn {
        position: absolute;
        left: 20px;
        bottom: 140px;
        width: 400px;
    }
    #factor02 {
        background: url("../img/features/circle_orange.webp")center top no-repeat, #ffeabd;
        position: relative;
    }
    #factor02 .contentIn {
        padding: 90px 20px;
        position: relative;
    }
    #factor02 .fact02_box {
        margin-bottom: 60px;
        display: flex;
    }
    #factor02 .fact02_box figure {
        order: 2;
        margin-bottom: 0;
        width: 450px;
        margin-left: 40px;
    }
    #factor02 .fact02_box > div {
        width: calc(100% - 490px);
        order: 1;
    }
    #factor02 .fact02_box h3 {
        font-size: 24px;
        padding-left: 40px;
    }
    #factor02 .fact02_box h3:before {
        width: 30px;
        height: 30px;
    }
    #fact02_info {
        display: flex;
        flex-wrap: wrap;
        padding: 40px;
        margin-bottom: 100px;
    }
    #fact02_info > .info {
        width: 46%;
    }
    #fact02_info > .info:first-of-type {
        margin-right: 8%;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
        position: relative;
    }
    #fact02_info > .info:first-of-type:after {
        content: "";
        border-right: dotted 2px #4e362f;
        width: 1px;
        height: 100%;
        position: absolute;
        right: -8%;
        top: 0;
    }
    #fact02_info .info h4 {
        font-weight: bold;
        font-size: 22px;
        padding: 10px 0;
        margin-bottom: 15px;
    }
    #fact02_info .report {
        margin-top: 40px;
        padding: 40px;
        width: 100%;
        display: flex;
    }
    #fact02_info .report > div {
        width: 300px;
        margin-right: 20px;
    }
    #fact02_info .report h5 {
        font-size: 24px;
        margin-bottom: 10px;
    }
    #fact02_info .report h5 span {
        font-size: 18px;
        display: block;
    }
    #fact02_info .report h5 span.history {
        font-size: 16px;
    }
    #fact02_info .reportList {
        display: flex;
        flex-wrap: wrap;
    }
    #fact02_info .reportList > li:not(:last-of-type) {
        margin-bottom: 10px;
    }
    #fact02_info .reportList > li {
        margin-bottom: 5px !important;
    }
    #fact02_info .reportList > li p {
        width: auto;
    }
    #fact02_info .reportList > li ol {
        display: flex;
        margin-left: 20px;
        width: 120px;
    }
    #fact02_info .reportFigure {
        margin-top: 0;
        width: calc(100% - 320px);
        display: flex;
    }
    #fact02_info .reportFigure img {
        width: 100%;
        height: auto;
    }
    #fact02_info .reportFigure li:first-of-type {
        margin-bottom: 0;
        margin-right: 50px;
    }
    #fact02_info .reportFigure li:first-of-type:after {
        background-size: 100%;
        left: auto;
        right: -40px;
        transform: translateY(-50%);
        bottom: 50%;
    }
    #factor02 .btn {
        margin-top: 100px;
    }
    #featureEx {
        background-size: 100% auto;
    }
    #featureEx .featureExBox01 {
        display: flex;
    }
    #featureEx .featureExBox01 > div {
        width: calc(100% - 610px);
    }
    #featureEx .featureExBox01 > ul.img {
        order: 2;
        align-items: center;
        width: 570px;
        margin-left: 40px;
    }
    #featureEx .featureExBox01 h2, #featureEx .featureExBox02 h2 {
        font-size: 30px;
    }
    #featureEx .featureExBox01 h2 + p, #featureEx .featureExBox02 h2 + p {
        font-size: 18px;
    }
    #featureEx .featureExBox01 a {
        font-size: 18px;
    }
    #featureEx .featureExBox02 {
        margin-top: 80px;
    }
    #featureEx .featureExBox02 ul {
        display: flex;
        margin-top: 40px;
    }
    #featureEx .featureExBox02 ul li {
        width: 48%;
    }
    #featureEx .featureExBox02 ul li:not(:last-of-type) {
        margin-bottom: 0;
        margin-right: 4%;
    }
    #featureEx .featureExBox02 ul li h3 {
        padding: 20px 0;
        margin-bottom: 0;
        font-size: 22px;
    }
    .devAnchor {
        display: flex;
        justify-content: center;
        padding: 0 40px 40px 40px;
        border-bottom: dotted 4px #4e362f;
    }
    .devAnchor li {
        width: 48%;
    }
    .devAnchor li:not(:last-of-type) {
        margin-bottom: 0;
        margin-right: 4%;
    }
    .devAnchor li a {
        text-align: center;
        padding: 20px 20px 20px 40px;
        font-size: 18px;
    }
    .devAnchor li a:hover {
        background: #eee;
    }
    .devAnchor li a:before {
        width: 40px;
        height: 40px;
    }
    .columnBox {
        padding: 20px 40px;
    }
    .columnBox:first-of-type {
        margin-bottom: 40px;
        padding-bottom: 60px;
        border-bottom: dotted 4px #4e362f;
    }
    .columnBox h2 {
        font-size: 42px;
        line-height: 1.8;
        margin-bottom: 40px;
    }
    .columnBox h2 span {
        font-size: 24px;
    }
    .columnBox p {
        font-size: 18px;
    }
    .columnBox p:not(:last-of-type) {
        margin-bottom: 40px;
    }
    .columnBox h3 {
        font-size: 24px;
    }
    .columnBox .profile {
        display: flex;
        border-radius: 20px;
        padding: 40px;
        margin-top: 40px;
        align-items: center;
    }
    .columnBox .profile figure {
        margin: 0;
        width: 200px;
        margin-right: 40px;
    }
    .columnBox .profile > div {
        width: calc(100% - 240px);
    }
    .columnBox .profile figure img {
        width: 100%;
        height: auto;
    }
    .columnBox .profile h4 {
        text-align: left;
        line-height: 1.4;
    }
    .columnBox .profile div p {
        font-size: 16px;
    }
    #aboutCatch {
        font-size: 28px;
        padding-top: 80px;
    }
    #aboutCatch + p {
        text-align: center;
        font-size: 18px;
		max-width: 1200px;
		margin: 0 auto 160px auto;
    }
    #aboutList .contentIn, #priceContent .contentIn, #pianoType .contentIn {
        padding-top: 20px;
    }
    #aboutList:before {
        height: 80px;
        top: -80px;
    }
    #aboutList:after {
        width: 247px;
        height: 146px;
        top: -180px;
    }
    #aboutList h2, #priceContent h2, #pianoType h2 {
        font-size: 36px;
        margin-bottom: 60px;
    }
    #aboutList h2 span, #priceContent h2 span, #pianoType h2 span {
        font-size: 18px;
    }
    #aboutList ol {
        display: flex;
        flex-wrap: wrap;
    }
    #aboutList ol li:first-of-type, #aboutList ol li:nth-of-type(2) {
        width: 48%;
    }
    #aboutList ol li:nth-of-type(2), #aboutList ol li:nth-of-type(5) {
        margin-right: 0;
    }
    #aboutList ol li {
        width: 30.6667%;
        margin-right: 4%;
        margin-bottom: 50px;
    }
    #aboutList ol li:not(:last-of-type) {
        margin-bottom: 50px;
    }
    #aboutList ol li:first-of-type figure, #aboutList ol li:nth-of-type(2) figure {
        height: 320px;
    }
    #aboutList ol li:first-of-type figure img, #aboutList ol li:nth-of-type(2) figure img {
        height: 320px;
    }
    #aboutList ol li figure {
        height: 280px;
    }
    #aboutList ol li figure img {
        height: 280px;
    }
    #aboutList ol li h3 {
        font-size: 30px;
        padding: 20px 0 30px 0;
    }
    #aboutList ol li h3:before {
        width: 100px;
        height: 100px;
        top: -70px;
    }
    #aboutList ol li p {
        padding: 0 30px 30px 30px;
    }
    #aboutList ol li a.lineBtn {
        margin: 0 60px 30px 60px;
        padding: 14px;
    }
    #aboutList ol li:nth-of-type(5):after {
        width: 142px;
        height: 96px;
        right: -40px;
        top: -30px;
    }
    .banarArea {
        margin: 80px auto 0 auto;
    }
    #priceContent:before, #pianoType:before {
        height: 80px;
        top: -80px;
    }
    #pianoType:after {
        width: 161px;
        height: 124px;
        top: -180px;
    }
	#pianoType .contentIn{
		padding-bottom: 180px;
	}
    #priceContent .contentIn {
        position: relative;
        z-index: 1;
    }
    #priceContent .contentIn:before {
        background: url("../img/features/circle_orange.webp")top center no-repeat;
        background-size: cover;
        width: 100vw;
        top: -80px;
        left: 50%;
        transform: translateX(-50%);
    }
    #priceSet {
        max-width: 1240px;
        margin: 0 auto;
        padding: 80px 20px 60px 20px;
        margin-bottom: 100px;
        display: flex;
    }
    #priceSet .addfee {
        width: 445px;
        height: fit-content;
        margin-bottom: 0;
        padding-bottom: 30px;
    }
    #priceSet .lessonfee {
        width: calc(100% - 495px);
        margin-left: 50px;
    }
    #priceSet .lessonfeeIn {
        padding: 20px 20px 20px 30px;
    }
    #priceSet .lessonfeeIn:before {
        height: 50px;
        width: 50px;
        left: -25px;
        transform: translateY(-50%);
        top: 50%;
    }
    #priceSet .lessonfeeIn + p {
        text-align: right;
    }
    #priceSet .addfee h2 {
        padding: 20px 20px 30px 20px;
        font-size: 26px;
    }
    #priceSet .addfee .campaign ul {
        left: 40px;
        right: 40px;
        top: -30px;
        padding: 10px;
    }
    #priceSet .addfee .campaign ul li:first-of-type {
        font-size: 22px;
    }
    #priceSet .addfee .campaign ul li:last-of-type {
        padding-right: 30px;
        font-size: 16px;
    }
    #priceSet .addfee .campaign ul li:last-of-type:after {
        width: 86px;
        height: 98px;
        right: -60px;
    }
    #priceSet .addfee .campaign ul li span {
        display: block;
        font-size: 24px;
    }
    #priceSet .addfee .price {
        padding: 40px 0 0 0;
        font-size: 26px;
    }
    #priceSet .addfee .price .num {
        font-size: 38px;
    }
    #priceSet .addfee > p:last-of-type {
        margin-top: 10px;
    }
    #priceSet .lessonfeeIn div {
        display: flex;
    }
    #priceSet .lessonfeeIn div h3 {
        width: 35%;
        text-align: left;
        padding: 20px;
        border-radius: 10px 0 0 10px;
        --mask: conic-gradient(from -132.5deg at right, #0000, #000 1deg 84deg, #0000 85deg) 50%/100% 27.49px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        font-size: 22px;
    }
    #priceSet .lessonfeeIn div ul {
        width: 65%;
    }
    #priceSet .lessonfeeIn div ul li:first-of-type span {
        font-size: 30px;
        margin-right: 5px;
    }
    #priceSet .lessonfeeIn div ul li:last-of-type {
        padding: 10px;
        margin-left: 40px;
    }
    #priceContent .lessonHead {
        display: flex;
    }
    #priceContent .lessonHead figure {
        order: 2;
        width: 760px;
        margin-bottom: 0;
        margin-left: 60px;
    }
    #priceContent .lessonHead > div {
        width: calc(100% - 820px);
    }
    #priceContent .lessonHead h3 {
        font-size: 20px;
        padding-left: 60px;
        margin-bottom: 10px;
    }
    #priceContent .lessonHead h3:before {
        width: 50px;
        height: 50px;
    }
    #priceContent .lessonHead table {
        border-collapse: collapse;
        width: 100%;
    }
    #priceContent .lessonHead table th {
        padding: 10px 5px;
        font-size: 18px;
    }
    #priceContent .lessonHead table td {
        padding: 10px 5px;
        font-size: 18px;
    }
    #priceContent .lessonPrice {
        padding-bottom: 30px;
        margin-bottom: 30px;
    }
    #priceContent .lessonPrice h3, #priceContent .prepar h3 {
        padding-left: 40px;
        font-size: 22px;
    }
    #priceContent .lessonPrice h3:before, #priceContent .prepar h3:before {
        width: 35px;
        height: 35px;
    }
    #priceContent .lessonPrice h3 span {
        font-size: 16px;
    }
    #priceContent .lessonPrice h3 + p {
        margin-bottom: 40px;
    }
    #priceContent .lessonPrice .price-table-support {
        width: 100%;
        border-collapse: collapse;
    }
    #priceContent .lessonPrice .price-table-support tr {
        display: grid;
        grid-template-columns: 200px 1fr 200px;
        gap: 10px;
        margin-top: 60px;
    }
    #priceContent .lessonPrice .price-table-support th {
        padding-top: 10px;
        font-size: 18px;
        margin-right: 2%;
    }
    #priceContent .lessonPrice .price-table-support td {
        border-radius: 10px;
        padding: 15px;
        font-size: 18px;
    }
    #priceContent .lessonPrice .note {
        margin-top: 30px;
        font-size: 16px;
    }
    #priceContent .prepar ul {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        padding: 30px;
    }
    #priceContent .prepar ul li:not(:last-of-type) {
        margin-bottom: 20px;
        margin-right: 40px;
    }
    #priceContent .prepar ul li h4 {
        font-size: 18px;
        padding-left: 30px;
    }
    #priceContent .prepar ul li h4:before {
        width: 24px;
        height: 24px;
        top: 6px;
    }
    #priceContent .prepar ul li p {
        padding-left: 30px;
    }
    #priceContent .prepar ul li a {
        margin: 20px 30px 0 30px;
        padding: 10px;
        font-size: 18px;
    }
	#pianoType h2{
		margin-bottom: 20px;
	}
#pianoType h2 + p{
	margin-bottom: 60px;
	font-size: 18px;
}
	#pianoType ul{
		margin-bottom: 30px;
	}
#pianoType ul li{
	width: 23.5%;
	margin-right: 2%;
}
#pianoType ul li:nth-of-type(odd){
	margin-right: 2%;
}
	#pianoType ul li:last-of-type{
		margin-right: 0;
	}
#pianoType ul li figure{
	background: #fff;
	border-radius: 10px;
	padding-bottom: 20px;
}
#pianoSpec .contentIn{
	padding: 120px 20px;
	display: flex;
	align-items: flex-start;
}
#pianoSpec figure{
	margin-top: 80px;
	order: 2;
	width: 450px;
	margin-bottom: 0;
}
	#pianoSpec .contentIn > div{
		width: calc(100% - 500px);
		margin-right:50px;
	}
#pianoSpec figure:after{
	right: -15px;
	bottom: -15px;
}
#pianoSpec h2{
	font-size: 30px;
}
#pianoSpec ul{
	display: flex;
}
#pianoSpec ul li{
	width: 49%;
	font-size: 18px;
}
#pianoSpec ul li:not(:last-of-type){
	margin-bottom: 0;
	margin-right: 2%;
}
	#pianoAdvise.adjacentBc .contentIn{
		padding-top: 60px;
	}
#pianoAdvise .head{
	padding-top:0;
	text-align: left;
	padding-left: 110px;
	margin-bottom: 40px;
}
#pianoAdvise .head h2{
	font-size: 30px;
}
#pianoAdvise .head:before{
	left: 0;
	transform: translateY(-50%);
	top: 50%;
}
	#pianoAdvise ul li{
		display: flex;
		align-items: center;
	}
	#pianoAdvise ul li figure{
		width: 285px;
		margin-right: 30px;
	}
	#pianoAdvise ul li > div{
		width: calc(100% - 315px);
	}
#pianoAdvise ul li:not(:last-of-type){
	margin-bottom: 20px;
}
#pianoAdvise ul li h3{
	font-size: 26px;
}
#voiceList{
	padding: 0 20px 160px 20px;
}
#voiceList h2{
	padding: 80px 0 20px 0;
}
#voiceList h2 + p{
	padding: 0 0 30px 0;
	margin-bottom: 30px;
}
	#teacherList h2 + p,#faqList h2 + p{
		margin-bottom: 30px;
	}
	#teacherList .contentIn,#faqList  .contentIn{
		padding-top: 20px;
	}
#teacherList{
	background: url("../img/teacher/main_bg.webp")top 200px center no-repeat;
	background-size: auto;
}
	#teacherList ul{
		display: flex;
		flex-wrap: wrap;
	}
	#teacherList ul li{
		width: 46%;
		margin-right: 8%;
		display: flex;
	border-bottom: none;
	}
	#teacherList ul li:nth-of-type(even){
		margin-right: 0;
	}
	#teacherList ul li > div{
	width: calc(100% - 250px);
}
#teacherList ul li figure{
	width: 220px;
	margin-right: 30px;
}
#faqList ul li h3{
	font-size: 20px;
	padding-left: 45px;
	cursor: pointer;
}
#faqList ul li h3:before{
	width: 34px;
	height: 34px;
	font-size: 22px;
}
#faqList ul li p{
	padding: 20px;
}
	
#campaignMerit{
	padding: 0;
	margin-top: -20px;
}
#campaignMerit p:first-of-type{
	font-size: 18px;
	text-align: center;
}
#campaignMerit p:first-of-type br:first-of-type{
	display: block;
}
#campaignMerit ul{
	display: flex;
	margin: 60px 0 100px 0;
	padding: 0;
}
#campaignMerit ul li{
	width: 45%;
	position: relative;
}
#campaignMerit ul li:first-of-type:before{
	content: "";
	background: url("../img/campaign/ico_01.webp")center center no-repeat;
	background-size: 100%;
	width: 140px;
	height: 100px;
	position: absolute;
	left: -40px;
	top: -50px;
}
#campaignMerit ul li:first-of-type:after{
	width:100px;
	bottom: 50%;
	right: -22%;
	transform: translateY(50%);
	font-size: 70px;
}
#campaignMerit ul li:nth-of-type(2):before{
	width: 140px;
	height: 127px;
}
#campaignMerit ul li:first-of-type{
	margin-bottom: 0;
	margin-right: 10%;
}
	
#campaignMerit .campaignTime .tit{
	font-size: 24px;
	top: -40px;
}
#campaignMerit .campaignTime{
	width: 600px;
	margin: 0 auto;
	font-size: 26px;
	padding:10px 20px;
}
#campaignMerit .campaignTime .day{
	font-size:20px;
}
	#campaignFlow h1{
		color: #ed7486;
	}
	#campaignFlow h1 span{
		color: #4e362f;
	}
#campaignFlow{
	margin-top: -40px;
	padding: 0;
}
#campaignFlow ol{
	display: flex;
	padding:40px 20px 20px 20px;
}
#campaignFlow ol li{
	width: 32.5%;
	padding:40px 20px 20px 20px;
}
#campaignFlow ol li:not(:last-of-type){
	margin-bottom: 0;
	margin-right: 2%;
}
#campaignFlow ol li .tit{
	font-size: 30px;
	top: -36px;
}
#campaignFlow ol li .tit span{
	font-size: 36px;
}
#springCampaign {
	max-width: 900px;
	margin: 40px auto 0 auto;
	padding: 20px 40px 40px 40px;
}
	#springCampaign h2 br{
		display: none;
	}
#springCampaign h2{
	font-size: 34px;
	margin-bottom: 20px;
}
#springCampaign h2 span{
	font-size: 50px;
}
#springCampaign ul{
	display: flex;
}
#springCampaign ul li{
	width: 49%;
	line-height: 1.6;
}
#springCampaign ul li span{
	font-size: 26px;
	color: #F56F90;
	display: block;
}
#springCampaign ul li:not(:first-of-type){
	margin-top: 0;
	margin-left: 2%;
}
#springCampaign time{
	font-size: 18px;
	background: #f56f90;
	color: #fff;
	border: none;
	border-radius: 5px;
	padding: 5px;
}
/** summer add **/
#springCampaign.summer time{
	background:#679C07;
}
	#priceSet .addfee .campaign .price{
		padding-top: 20px;
	}
#priceSet .addfee .campaign .bubbleIn {
	margin: 20px 30px 0 30px;
	font-size: 16px;
}
}