/* ============================
SP用 共通
============================ */
@font-face {
    font-family: "Number";
    src: local("Arial");
    unicode-range: U+0030-0039; /* 0-9 */
}

@font-face {
    font-family: "Number";
    src: local("Arial Bold");
    font-weight: bold;
    unicode-range: U+0030-0039; /* 0-9 */
}
body {
    line-height: 1.5;
    font-size: 16px;
    color: #333333;
    font-family: "Number", "Noto Sans JP", "Yu Gothic Medium", sans-serif;
}
.sp_only {
    display: none;
}
.body_wrap {
    margin: 0 auto;
    overflow: hidden;
}
.body_wrap img {
    width: 100%;
}
/* ============================
SP用 共通
============================ */
@media screen and (max-width: 768px) {
    body {
        line-height: 1.5;
        font-size: 14px;
    }
    .sp_only {
        display: block;
    }
    .pc_only {
        display: none;
    }
    .body_wrap {
        width: auto;
    }
}
/* ============================
 ヘッダー
============================ */
.header_wrap {
    background-color: #ffffff;
}
.header_wrap .wrap_inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
    max-width: 98%;
    margin: 0 auto;
    height: 66px;
}
.header_wrap img {
    width: 240px;
    margin: -10px 0 0 0;
}
.header_wrap .contact_form li {
    width: 190px;
}
.wrap_inner {
    width: auto;
    max-width: 900px;
    margin: 0 auto;
}
/* ============================
SP用  ヘッダー
============================ */
@media screen and (max-width: 768px) {
    .header_wrap .wrap_inner {
        height: 52px;
    }
    .header_wrap img {
        width: 210px;
        margin: -10px 0 0 0;
    }
    .header_wrap .contact_form {
        display: none;
    }
}
/* ============================
メイン画像
============================ */
.main_img {
    background: linear-gradient(90deg, #4db2ff 0%, #4db2ff 50%, #ff70c9 50%, #ff70c9 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.main_img img {
    width: 100%;
    max-width: 900px;
}
.sub_wrap {
    text-align: center;
    padding: 15px 0;
}
.sub_wrap img {
    width: 100%;
    max-width: 900px;
}
/* ============================
 ご予約・お問い合わせ
============================ */
.contact_wrap {
    background-color: #f5f5f5;
    padding: 30px 5%;
}
/* お気軽にお問い合わせください */
.message_01 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    padding: 0 0 5px 0;
    font-size: 20px;
    font-weight: bold;
    color: #666666;
    letter-spacing: 0.1em;
}
.message_01::before,
.message_01::after {
    content: "";
    background-color: #666666;
    height: 1.5px;
    width: 18px;
    margin-top: 5px;
}
.message_01::before {
    transform: rotate(60deg);
}
.message_01::after {
    transform: rotate(-60deg);
}
.contact_form {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}
.contact_form li {
    width: 100%;
}
.contact_form .contact_form_reservation {
    margin-right: 3%;
}
.contact_form li a {
    display: block;
    width: 100%;
    border-radius: 6px;
    color: #ffffff;
    padding: 12px 0;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    margin: 0 auto;
    line-height: 2.2;
    font-size: 20px;
}
.contact_form .contact_form_reservation a {
    background: #f77f0f;
    box-shadow: 0 2px 4px #5c5c5c47;
}
.contact_form .contact_form_reservation a:hover {
    background: #ff8819;
}
.contact_form .contact_form_inquiry a {
    background: #25a00c;
    box-shadow: 0 2px 4px #5c5c5c47;
}
.contact_form .contact_form_inquiry a:hover {
    background: #29aa0f;
}
.header_wrap .contact_form .contact_form_reservation a,
.header_wrap .contact_form .contact_form_inquiry a {
    box-shadow: none;
    font-size: 16px;
    line-height: 1.5;
}
/* ============================
SP用  ご予約・お問い合わせ
============================ */
@media screen and (max-width: 768px) {
    .message_01 {
        font-size: 17px;
    }
    .contact_form li a {
        padding: 12px 0;
        line-height: 1.3;
        font-size: 15px;
    }
}
/* ============================
 サブメニュー
============================ */
.message_02 {
    text-align: center;
    margin-top: 36px;
    padding: 0px 0 16px;
    font-size: 17px;
    font-weight: bold;
    color: #666666;
    letter-spacing: 0.08em;
}
.sub_menu {
    display: flex;
    justify-content: center;
    align-items: center;
}
.sub_menu li {
    width: 33.3%;
}
.sub_menu li.nth-child {
    margin: 0 2%;
}
.sub_menu li a {
    display: block;
    border: solid #2ba3ff 2px;
    border-radius: 6px;
    text-align: center;
    padding: 10px 0px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    color: #2ba3ff;
    background: #ffffff;
}
.sub_menu li img {
    width: 59.16px;
    height: auto;
    margin: 0 auto 6px;
    display: block;
}
/* ============================
SP用  サブメニュー
============================ */
@media screen and (max-width: 768px) {
    .message_02 {
        margin-top: 26px;
        padding: 0px 0 16px;
        font-size: 15px;
    }
    .sub_menu li a {
        font-size: 14px;
    }
}
/* ============================
 共通タイトル
============================ */
.title_01 {
    text-align: center;
    font-size: 36px;
    width: 100%;
    font-weight: bold;
    background: url(../image/title_bg.png) no-repeat center bottom;
    background-size: auto 3px;
    padding: 18px 0 26px 0;
    margin: 0px 0 36px;
    line-height: 1.1em;
}
.title_01 span {
    display: block;
    font-size: 18px;
    letter-spacing: 0.1em;
}
/* ============================
SP用  共通タイトル
============================ */
@media screen and (max-width: 768px) {
    .title_01 {
        font-size: 24px;
        background-size: auto 2.5px;
        padding: 18px 0;
        margin: 0px 0 23px;
        line-height: 1.1em;
    }
    .title_01 span {
        font-size: 13px;
    }
}
/* ============================
 3つのポイント
============================ */
.point_wrap {
    padding: 5px 5%;
}
.point_list li {
    margin: 0 0 20px;
}
.point_list_title {
    background: #4db2ff;
    color: #ffffff;
    font-size: 20px;
    display: flex;
    padding: 14px 0 14px 20px;
    font-weight: bold;
    margin: 0 0 10px;
}
.point_list_tex {
    display: flex;
}
.point_list_tex .point_img {
    width: 50%;
}
.point_list p {
    width: 50%;
    margin: 10px 0 0 20px;
}
.point_list_title .number {
    background: #ffffff;
    color: #4db2ff;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px 15px 0 0;
    font-size: 40px;
    line-height: 2;
}
/* ============================
SP用  3つのポイント
============================ */
@media screen and (max-width: 768px) {
    .point_list_title {
        font-size: 17px;
        padding: 10px 0 10px 13px;
        margin: 0 -5.5% 10px;
    }
    .point_list_tex {
        display: block;
    }
    .point_list_tex .point_img {
        width: auto;
    }
    .point_list p {
        width: auto;
        margin: 10px 0 0 0;
    }
    .point_list_title .number {
        width: 48px;
        height: 48px;
        margin: 2px 8px 0 0;
        font-size: 36px;
        line-height: 2;
    }
}
/* ============================
授業・料金
============================ */
.lesson_wrap {
    background: #fdf7ee;
    padding: 30px 5% 40px 5%;
}
.lesson_list li {
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 0 0 26px 0;
    line-height: 1.7;
}
.lesson_list_title {
    background: #fa75c8;
    color: #ffffff;
    font-size: 17px;
    padding: 13px 1% 13px 5%;
    font-weight: bold;
    border-radius: 10px 10px 0 0;
}
.lesson_list li dl {
    margin: 15px 5% 5px 5%;
}
.lesson_list li dl dt {
    font-weight: bold;
    margin-bottom: 3px;
}
.lesson_list li .note {
    font-size: 12px;
    color: #6c6c6c;
    line-height: 1.5;
    display: inline-block;
    margin-top: 5px;
}
.lesson_timetable {
    border-collapse: collapse;
    text-align: left;
}
.lesson_timetable th {
    vertical-align: top;
    font-weight: normal;
    padding: 0 10px 10px 0;
}
.lesson_timetable td {
    padding: 0 0 10px 10px;
}
.access_map {
    margin: 16px 0;
}
/* ============================
SP用  授業・料金
============================ */
@media screen and (max-width: 768px) {
    .lesson_wrap {
        padding: 15px 5% 5px 5%;
    }
}
/* ============================
入会までの流れ
============================ */
.join-flow_wrap {
    padding: 30px 5% 70px;
}
.join-flow_list {
    margin-bottom: 20px;
}
.join-flow_list li {
    border-bottom: dotted 1px #dddddd;
    margin-bottom: 10px;
    padding-bottom: 20px;
}
.join-flow_list_title {
    text-align: center;
    font-size: 20px;
    padding: 0 0 13px;
}
.join-flow_list_title .number {
    position: relative;
    display: inline-block;
    margin: 0 auto 10px;
    padding: 3px 10px;
    width: 50px;
    color: #ffffff;
    font-size: 18px;
    background: #4db2ff;
    border-radius: 30px;
    text-align: center;
}

.join-flow_list_title .number::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top: 6px solid #4db2ff;
}
/* ============================
SP用  入会までの流れ
============================ */
@media screen and (max-width: 768px) {
    .join-flow_wrap {
        padding: 5px 5% 20px;
    }
    .join-flow_list_title {
        font-size: 17px;
        padding: 0 0 13px;
    }
}
/* ============================
 はるかぜそろばん教室とは？
============================ */
.about_wrap {
    padding: 40px 5% 60px;
}
.about_wrap .title_01 {
    font-size: 30px;
}
.about_text {
    background-color: #fff; /* 背景色 */
    background-image:
        linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
        /* 点線1の色 */ linear-gradient(180deg, #dddddd 1px, transparent 1px); /* 点線2の色と太さ */
    background-size:
        8px 100%,
        /* 点線1のサイズ */ 100% 2.8em; /* 点線2のサイズ */
    line-height: 2.8em; /* 文字の高さ */
    padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}
/* ============================
SP用  はるかぜそろばん教室とは？
============================ */
@media screen and (max-width: 768px) {
    .about_wrap {
        padding: 15px 5% 5px 5%;
    }
    .about_wrap .title_01 {
        font-size: 22px;
    }
}
/* ============================
よくある質問
============================ */
.faq_wrap {
    background: #e8f3ff;
    padding: 40px 5%;
}
.faq_list li {
    background: #ffffff;
    border-radius: 6px;
    margin: 0 0 15px;
    padding: 16px 3% 16px 5%;
}
.faq_list dt,
.faq_list dd {
    display: flex;
}
.faq_list dt {
    padding-bottom: 8px;
    font-weight: bold;
}
.faq_list_q,
.faq_list_a {
    color: #4db2ff;
    display: flex;
    align-items: left;
    justify-content: center;
    margin: 0 8px 0 0;
    font-size: 16px;
    font-weight: bold;
}
.faq_list_a {
    color: #fa75c8;
}
/* ============================
SP用  よくある質問
============================ */
@media screen and (max-width: 768px) {
    .faq_wrap {
        padding: 10px 5%;
    }
}
/* ============================
フッター
============================ */
.footer_wrap {
    background: #4db2ff;
    color: #ffffff;
    padding: 15px 5%;
}
.footer_wrap a {
    color: #ffffff;
    text-decoration: none;
}
.footer_menu {
    margin-bottom: 20px;
}
.footer_menu .arrow {
    position: relative;
    display: inline-block;
    padding: 10px 0 10px 3px;
    vertical-align: middle;
    text-decoration: none;
    width: 100%;
    border-bottom: 1px solid #ffffff;
}
.footer_menu .arrow::before,
.footer_menu .arrow::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.footer_menu .arrow::before {
    right: 3px;
    width: 4px;
    height: 4px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.copyright {
    text-align: center;
    font-size: 12px;
}