/*============================================================
基本設定
============================================================*/
body {
    margin: 0px 0px;
    font-family: "Zen Kaku Gothic New", serif;
    font-weight: 500;
    color: #444;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

em,
strong {
    font-weight: 900;
}

.btn_enquiry {
    width: 500px;
    max-width: calc(100% - 40px);
    margin: 20px auto;
    text-align: center;
}

.arrow_bottom {
    height: 30px;
    width: 80px;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    margin: 10px auto;
    background-color: #ff5050;
}

/*============================================================
ヘッダー
============================================================*/

#hd_bnr {
    width: 100%;
    text-align: center;
    background-image: url(../images/bg_hd.png);
    background-position: center center;
    background-size: cover;
}

#hd_bnr>div {
    max-width: 1300px;
    width: 100%;
    margin: 0px auto;
    text-align: center;
}

h2,
h3,
h4,
h5,
h6,
strong {

    font-weight: 900;
}

/*============================================================
実績
============================================================*/

#hd_ttl {
    background-image:
        url(../images/lace_pink.png),
        url(../images/bg_evidence.png),
        url(../images/bg_pink_01.jpg);
    background-position: top -3px center, center center, top center;
    background-size: 300px auto, cover, cover;
    background-repeat: repeat-x, no-repeat, no-repeat;
    padding: 100px 0px 80px 0px;
    position: relative;
    z-index: 10;
    box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.2);
}

#hd_ttl p {
    display: table;
    padding: 10px 20px 20px 20px;
    margin: 0px auto;
    background-color: #ff928c;
    font-size: 42px;
    line-height: 1;
    color: #fff;
    font-weight: 900;
}

#hd_ttl p span {
    font-size: 120%;
}

#hd_ttl h1 {
    font-size: 60px;
    line-height: 1.8;
    text-align: center;
    font-weight: 900;
    color: #6b2700;
    margin: 40px auto 0px auto;
}

#hd_ttl h1 em {
    font-style: normal;
    background: linear-gradient(transparent 50%, #ffff00 100%);

}

#hd_ttl h1 strong {
    color: #ff5050;
}

#hd_ttl #ilst_evidence {
    position: absolute;
    left: calc(50% - 480px);
    top: 80px;
    width: 130px;
    height: 130px;
}

/*============================================================
悩み
============================================================*/
#wrap_nayami {
    width: 100%;
    background-image: url(../images/bg_gray.jpg);
    background-position: top center;
    position: relative;
    z-index: 9;
    padding: 60px 0px;
}

#wrap_nayami::before {
    content: "";
    position: absolute;
    height: 60px;
    width: 100%;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    width: 100%;
    background-image: url(../images/bg_gray.jpg);
    background-position: 600px center;
    left: 0;
    bottom: -60px;
}

#wrap_nayami h2 {
    margin: 0px auto;
    padding: 0px;
    text-align: center;
    font-size: 60px;
    display: table;
    text-decoration: underline wavy #444;
    text-underline-offset: 10px;
}

#wrap_nayami h2 strong {
    font-size: 1.5em;
}



#wrap_nayami ul {
    max-width: 1240px;
    width: 100%;
    margin: 40px auto 0px auto;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#wrap_nayami ul li {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    width: calc(100% / 4 - 20px);
}

/*============================================================
一緒に解決しましょう！
============================================================*/
#wrap_solve_together {
    margin: 0px auto;
    text-align: center;
    max-width: calc(100% - 40px);
    padding: 120px 0px 0px 0px;
}

#wrap_solve_together p {
    font-size: 46px;
    font-weight: 700;
    margin: 0px auto;
    text-align: center;
}

#wrap_solve_together p span {
    font-size: 150%;
    font-weight: 900;
    color: #ff5050;
    background-image: radial-gradient(circle at center, #ff5050 20%, transparent 20%);
    background-position: top right;
    background-repeat: repeat-x;
    background-size: 1em 0.3em;
    padding-top: .2em;
}

/*============================================================
ピアノ教室のホームページに必要な情報
============================================================*/
#wrap_necessary_info {
    margin: 0px auto;

}

#wrap_necessary_info>h2 {
    background-image:
        url(../images/lace_white.png),
        url(../images/bg_dark_brown.jpg);
    background-position: top -3px center, bottom center;
    background-repeat: repeat-x, no-repeat;
    background-size: 300px, auto;
    text-align: center;
    color: #fff;
    font-size: 45px;
    padding: 50px 0px;
    margin: 0px auto;
    word-break: keep-all;
}

#wrap_necessary_info>section {
    background-image: url(../images/bg_brown.jpg);
    background-color: rgba(255, 255, 255, 0.6);
    background-blend-mode: lighten;
    background-size: cover;
    background-position: top center;
}

#wrap_necessary_info>section>section {
    width: calc(100% - 40px);
    max-width: 1240px;
    margin: 0px auto;
    padding: 40px 0px 80px 0px;
}

#wrap_necessary_info #txt_necessary_intro {
    margin: 0px auto;
    text-align: center;
    font-size: 24px;
    padding: 40px 0px;
    word-break: keep-all;
}

#img_sitemap+p {
    font-size: 100px;
    text-align: center;
    margin: 20px auto;
    font-weight: 900;
}

/*集客するためには*/
#wrap_in_order_to {
    background-color: #fffbee;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    padding: 80px 40px;
    width: 800px;
    max-width: calc(100% - 40px - 80px);
    margin: 40px auto 40px auto;
    position: relative;
}

#img_how{
width: 240px;
height: 240px;
position: absolute;
left:-50px;
top:-50px;
}
#wrap_in_order_to h3 {
    font-size: 42px;
    text-align: center;
    margin: 0px auto 30px auto;
}

#wrap_in_order_to h4 {
    font-size: 42px;
    text-align: center;
    margin: 30px auto;
    color: #ff5050;
}

#wrap_in_order_to p {
    font-size: 28px;
    line-height: 2;
    text-align: center;
    font-weight: 700;
    word-break: keep-all;
}

#wrap_in_order_to p strong {
    color: #ff5050;
    background: linear-gradient(transparent 50%, #ffff00 100%);
}

#wrap_no_idea {
    background: #fffbee;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    margin: 80px auto;
    width: 1240px;
    max-width: calc(100% - 40px - 160px);
    padding: 80px 80px 80px 80px;
}

#wrap_no_idea h3 {
    font-size: 48px;
    text-align: center;
    color: #ff5050;
    margin: 0px auto 40px auto;
    word-break: keep-all;
}

#wrap_no_idea>section#wrap_help {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#wrap_no_idea>section#wrap_help div {
    width: 230px;
    margin: auto;
    ;
}

#wrap_no_idea>section#wrap_help section {
    width: calc(100% - 260px);
}

#wrap_no_idea>section#wrap_help section p {
    font-size: 24px;
}

#wrap_no_idea>section#wrap_help section p strong {
    color: #ff5050;
    background: linear-gradient(transparent 50%, #ffff00 100%);
}

#wrap_help+h3 {
    margin-top: 60px;
}

#wrap_help_compare {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#wrap_help_compare>section {
    width: calc(100% / 2 - 40px);
    margin: 0px auto;
}

#wrap_help_compare>section h4 {
    text-align: center;
    font-size: 42px;
    margin: 0px auto;
    text-align: center;
}

#wrap_help_compare>section p {
    font-size: 30px;
    margin: 0px auto;
    text-align: center;
}




/*============================================================
ホームページ作成には以下のものも含まれます
============================================================*/
#wrap_service_includes {
    position: relative;

}

#wrap_service_includes>h2 {
    background-image:
        url(../images/lace_ccbaac.png),
        url(../images/bg_dark_brown.jpg);
    background-position: top -3px center, bottom center;
    background-repeat: repeat-x, no-repeat;
    background-size: 300px, auto;
    text-align: center;
    color: #fff;
    font-size: 45px;
    padding: 50px 0px;
    margin: 0px auto;
    word-break: keep-all;
}

#wrap_seo {
    background: linear-gradient(-90deg, rgba(248, 241, 225, 1) 0%, rgba(248, 244, 238, 1) 50%, rgba(247, 228, 213, 1) 100%);
    position: relative;
    z-index: 6;
    box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.2);

}

#wrap_responsive {
    z-index: 5;
    position: relative;
    background-color: #fff;
    box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.2);
}

#wrap_design {
    background: linear-gradient(-90deg, rgba(248, 241, 225, 1) 0%, rgba(248, 244, 238, 1) 50%, rgba(247, 228, 213, 1) 100%);
    position: relative;
    z-index: 4;
    box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.2);
}

#wrap_design section.wrap_service_inner:nth-of-type(2) {
    flex-direction: row-reverse;
}

#wrap_service_includes>section>section {
    max-width: 1240px;
    width: calc(100% - 40px);
    margin: 0px auto;
    padding: 80px 0px;
}

#wrap_service_includes h3 {
    font-size: 45px;
    line-height: 1.5;
    color: #983300;
    text-align: center;
    margin: 0px auto 80px auto;
    padding: 20px 0px;
    display: table;
    position: relative;
}

#wrap_service_includes h3::before {
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    border-top: solid 2px #983300;
}

#wrap_service_includes h3::after {
    content: "";
    background-image: url(../images/ttl_fukidashi_01.svg?a);
    background-repeat: no-repeat;
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: -40px;
    left: 0px;
    z-index: 2;
}

#wrap_service_includes .ttl_service {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 240px;
    height: 240px;
    ;
}

#wrap_service_includes h4 {
    font-size: 32px;
    color: #ff5050;
    margin: 60px 0px 40px 0px;
}

#wrap_service_includes p {
    font-size: 24px;
    line-height: 1.8;
}
#wrap_service_includes p:first-child{
    margin-top:0px;
}
#wrap_service_includes p strong {
    background: linear-gradient(transparent 50%, #ffff00 100%);
}

.wrap_service_inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.wrap_service_inner+.wrap_service_inner {
    margin-top: 60px;
}

.wrap_service_inner>div {
    max-width: 460px;
    width: 100%;
    margin: 0px auto;
    text-align: center;
}

.wrap_service_inner>section {
    width: calc(100% - 460px - 60px);
}



/*============================================================
制作費用
============================================================*/
#wrap_cost {
    background-image: url(../images/bg_dark_brown.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    color: #fff;
    font-size: 34px;
    padding: 80px 0px;
    position: relative;
}

#wrap_cost::before {
    content: "";
    position: absolute;
    height: 60px;
    width: 100%;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    width: 100%;
    background-image: url(../images/bg_dark_brown.jpg);
    background-position: 600px center;
    left: 0;
    bottom: -59px;
}

#wrap_total_cost {
    text-align: center;
    width: calc(100% - 40px);
    max-width: 800px;
    margin: 0px auto;
    position: relative;
    z-index: 3;
}

#wrap_cost h2 {
    font-size: 40px;
    margin: 60px auto 30px auto;
    text-align: center;
    word-break: keep-all;
}

#txt_simulation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 40px;
    align-items: flex-end;
}

#inp_lesson {
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
    margin: 0px 10px;
}

#inp_lesson span {
    display: block;
}

#inp_lesson input {
    font-size: 40px;
    border: solid 1px #333;
    padding: 10px;
    width: 200px;
    border-radius: 5px;
    text-align: center;
}

#wrap_simulation_result {
    font-size: 34px;
    text-align: left;
    font-weight: 700;
    width: calc(100% - 40px);
    max-width: 1240px;
    margin: 60px auto;
}

#wrap_simulation_result div+div {
    margin-top: 40px;
}

#wrap_simulation_result strong {
    font-weight: 900;
    background: linear-gradient(transparent 50%, #ffc200 100%);
}

/*============================================================
増収増益
============================================================*/
#wrap_increase {
    background-image: url(../images/bg_pink_02.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    ;
    padding: 180px 0px 120px 0px;
    width: 100%;
}

#wrap_increase>div {
    width: calc(100% - 40px);
    max-width: 700px;
    margin: 0px auto;
    text-align: center;
}


/*============================================================
最強タッグ
============================================================*/
#wrap_team {

    background-image: url(../images/bg_pink_01.jpg);
    background-position: top center;
}

#wrap_team>h2 {
    background-image:
        url(../images/lace_pink.png),
        url(../images/bg_dark_brown.jpg);
    background-position: top -3px center, bottom center;
    background-repeat: repeat-x, no-repeat;
    background-size: 300px, auto;
    text-align: center;
    color: #fff;
    font-size: 45px;
    padding: 50px 0px;
    margin: 0px auto;
}

#wrap_team>section {
    max-width: 1240px;
    width: calc(100% - 40px);
    margin: 0px auto;
    padding: 80px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#wrap_team>section>section {
    width: calc(500 / (1200 - 100) * 100%);
}

#wrap_team>section>div {
    width: 100px;
    margin: 100px auto 0px auto;
    text-align: center;
}

#wrap_team>section>section>div {
    width: 90%;
    margin: 0px auto 40px auto;
}

#wrap_team>section>section>section {
    width: calc(100% - 60px);
    background-color: #fff;
    padding: 30px 40px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    font-size: 22px;
    line-height: 1.8;
}

/*============================================================
よくある質問
============================================================*/
#wrap_faq {
    background-position: top center;
    background-image: url(../images/bg_brown.jpg);
    background-color: rgba(255, 255, 255, 0.6);
    background-blend-mode: lighten;
    background-size: cover;
    background-position: top center;

}

#wrap_faq>h2 {
    background-image:
        url(../images/lace_ccbaac.png),
        url(../images/bg_dark_brown.jpg);
    background-position: top -3px center, bottom center;
    background-repeat: repeat-x, no-repeat;
    background-size: 300px, auto;
    text-align: center;
    color: #fff;
    font-size: 45px;
    padding: 50px 0px;
    margin: 0px auto;
}

#wrap_faq>section {
    max-width: 1240px;
    width: calc(100% - 40px);
    margin: 0px auto;
    padding: 40px 0px 80px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#wrap_faq>section>section {
    width: calc(100% - 40px);
    max-width: 960px;
    padding: 20px 20px;
    margin: 10px 0px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

#wrap_faq>section h3 {
    padding: 0px 80px 0px 80px;
    margin: 0px 0px 0px 0px;
    position: relative;
    font-size: 32px;
    font-weight: 500;
    cursor: pointer;
}

#wrap_faq>section h3::before {
    content: "Ｑ";
    color: #c0955b;
    position: absolute;
    left: 0px;
    top: 0px;
    font-weight: 900;
}

#wrap_faq>section h3::after {
    content: "＋";
    position: absolute;
    right: 0px;
    top: 0px;
    font-weight: 900;
}

#wrap_faq>section>section h3.down::after {
    content: "－";
}

#wrap_faq>section div {
    padding: 0px 80px 0px 80px;
    font-size: 24px;
    font-weight: 400;
    display: none;
}

/*============================================================
お問い合わせ
============================================================*/
#wrap_enquiry {
    background-position: top center;
    background-image: url(../images/bg_brown.jpg);
    background-color: rgba(255, 255, 255, 0.6);
    background-blend-mode: lighten;
    background-size: cover;
    background-position: top center;

}

#wrap_enquiry>h2 {
    background-image:
        url(../images/lace_ccbaac.png),
        url(../images/bg_dark_brown.jpg);
    background-position: top -3px center, bottom center;
    background-repeat: repeat-x, no-repeat;
    background-size: 300px, auto;
    text-align: center;
    color: #fff;
    font-size: 45px;
    padding: 50px 0px;
    margin: 0px auto;
}

#wrap_enquiry>section {
    max-width: 1000px;
    width: calc(100% - 40px);
    margin: 0px auto;
    font-size: 24px;
    padding: 80px 0px;
}

.tbl_form {
    border-collapse: collapse;
}

.tbl_form th,
.tbl_form td {
    vertical-align: top;
    text-align: left;
    padding: 10px;
    border: solid 1px #999;
    font-size: 24px;

}

.tbl_form th {
    white-space: nowrap;
}

.tbl_form input[type=text],
.tbl_form input[type=email],
.tbl_form input[type=tel],
.tbl_form textarea {
    border-radius: 5px;
    outline: none;
    border: solid 1px #ccc;
    padding: 10px;
    font-size: 20px;
    width: calc(100% - 30px);
}

.tbl_form input[type=text]:focus,
.tbl_form input[type=email]:focus,
.tbl_form input[type=tel]:focus,
.tbl_form textarea:focus {
    background-color: #fffffc;
}

.tbl_form textarea {
    height: 5rem;
}

.txt_required {
    display: inline-block;
    font-size: 16px;
    padding: 4px 4px;
    border-radius: 10px;
    margin-left: 10px;
    color: #fff;
    background-color: #ff5050;
}

.error {
    font-weight: 900;
    color: #ff5050;
}

#wrap_form_error_message {
    display: none;
}

.tbl_form em {
    font-style: normal;
    font-size: 16px;
}

.btn_form {
    width: 500px;
    max-width: calc(100% - 40px);
    margin: 80px auto 40px auto;
    text-align: center;
}




/*============================================================
フッター
============================================================*/
#ft {
    padding: 80px 0px 180px 0px;
    font-size: 20px;
}

#ft ul {
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: center;
}

#ft ul li {
    margin: 0px 10px;
    padding: 0px;
    list-style-type: none;
}

#ft ul li a {
    color: #ff5050;
}


/*============================================================
下部CTA
============================================================*/
#ft_cta{
    position: fixed;
    bottom:0px;
    left:0px;
    width: 100%;
    padding:5px 0px;
    background-color:rgba(255,255,255,0.6);
}

#ft_cta ul{
    margin:5px auto;
    padding:0px;
    display: flex;
    flex-wrap:wrap;
    max-width:640px;
}

#ft_cta ul li{
    margin:0px auto;
    padding:0px;
    list-style-type: none;
    width: calc(100% / 3 - 20px);
    max-width: 120px;
}


/*============================================================
その他のページ
============================================================*/
#wrap_other_page {
    margin: 0px auto;

}

#wrap_other_page h1 {
    width: 360px;
    text-align: center;
    margin:20px auto;
}

#wrap_other_page h2 {
    background-image:
        url(../images/lace_white.png),
        url(../images/bg_dark_brown.jpg);
    background-position: top -3px center, bottom center;
    background-repeat: repeat-x, no-repeat;
    background-size: 300px, auto;
    text-align: center;
    color: #fff;
    font-size: 45px;
    padding: 50px 0px;
    margin: 0px auto;
}

#wrap_other_page>section {
    background-image: url(../images/bg_brown.jpg);
    background-color: rgba(255, 255, 255, 0.6);
    background-blend-mode: lighten;
    background-size: cover;
    background-position: top center;
    padding: 80px 0px;
}

#wrap_other_page>section>section {
    width: calc(100% - 40px);
    max-width: 1240px;
    margin: 0px auto;
    padding: 40px 0px 80px 0px;
}

#wrap_other_page {
    font-size: 24px;
    margin: 0px;
}

.btn_home {
    width: 360px;
    max-width: calc(100% - 80px);
    margin: 80px auto 20px auto;
}

.btn_home a {
    display: block;
    background-color: #ff5050;
    color: #fff;
    font-weight: 900;
    text-decoration: none;
    border-radius: 5px;
    padding: 20px 0px;
    font-size: 24px;
    margin:0px auto;
    text-align: center;
}

#wrap_other_page table {
    border-collapse: collapse;
}

#wrap_other_page table th,
#wrap_other_page table td {
    font-size: 24px;
    text-align: left;
    vertical-align: top;
    border: solid 1px #999;
    padding: 10px;
}