@charset "UTF-8";

/* 共通 */
a {
    text-decoration: none;
    color: #99686a;
}
a:hover {
    color: #0bd;
}
p, h1, h2, h3, h4, h5, h6{
    color: #99686a;
}
body {
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.dspl_nn {
    display: none;
}
html {
    scroll-behavior: smooth;
}
.fade-in {
    opacity: 0;
    transition-duration: 1000ms;
    transition-property: opacity, transform;
}
.fade-in-up {
    transform: translate(0, 50px);
}
.scroll-in {
    opacity: 1;
    transform: translate(0, 0);
}

/* フッター */
#top_group {
    background-color: #F4F0E3;
}
.top_group_container {
    width: 1300px;
    margin: 0 auto;
    max-width: 100%
}
.logo_sub {
    text-align: center;
    padding-top: 117px;
}
.logo_sub img {
    width: 579px;
    max-width: 80%;
}
.top_group_school {
    display: flex;
    justify-content: space-around;
    margin: 41px 0 50px 0;
}
.top_group_school h4 {
    text-align: center;
    margin-bottom: 15px;
    font-weight: normal;
    font-size: 25px;
}
.top_group_school p {
    font-size: 95%;
    color: #000000;
}
.top_group_container_2 {
    width: 1310px;
    margin: 0 auto;
    max-width: 100%;
}
.top_relations_logo {
    display: flex;
    justify-content: space-around;
    margin-bottom: 180px;
}
.top_relations {
    font-size: 25px;
    width: 1300px;
    max-width: 100%;
    margin: 0 auto;
}
.top_relations_logo img {
    width: 200px;
    max-width: 100%;
}
.top_group_puppy {
    margin: 0 5px;
    padding-bottom: 83px;
}
.top_group_puppy h3 {
    font-size: 45px;
    margin-bottom: 21px;
}
.puppy_group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    gap: 30px;
}
.group_btn {
    display: block;
    font-size: clamp(13px, 1.5vw, 16px);
    background: #FFFFFF;
    border-radius: 15px;
    padding: 10px 0;
}
footer {
    background-color: #99686a;
    text-align: center;
    color: #FFFFFF;
}
small {
    display: block;
    font-size: clamp(10px, 1.5vw, 15px);
    padding: .8em 0;
}


/* トップ画像 */
.top_main {
    background-color: #f7ebe5;
}
.image_center {
    text-align : center;
}
.bg-slider {
    width: 100%;
    height: 700px;
	background-position:center center;
	background-size: cover;
}
.sp_top {
    display: none;
}


/* トップサブ画像 */
.top_sub {
    background-color: #F4F0E3;
}
.top_sub img {
    width: 100%;
}
.top_back {
    background-color: #F4F0E3;
}
.top_back img{
    width: 100%;
}


/* キャッチコピー */
#top_catch {
    background-color: #f7ebe5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#top_catch h2 {
    font-size: 170%;
    margin-bottom: 30px;
}
.top_catch_box {
    width: 1010px;
    max-width: 99%;
    display: flex;
    justify-content: space-around;
    margin-left: auto;
    margin-right: auto;
    padding: 150px 0;
}
.top_catch_comment p {
    color: #000000;
    letter-spacing: .08em;
    font-weight: 300;
    font-size: 95%;
}
.top_catch_comment_box {
    margin-bottom: 1em;
}
#top_catch img {
    max-width: 100%;
    width: 500px;
}
#top_catch a {
    text-align: center;
    display: block;
    margin: 30px 0;
    border-radius: 0px;
    padding: 10px 0;
    background: #99686a;
    color: #F4F0E3;
    width: 200px;
}
#top_catch a:hover {
    background: #b79596;
}

/* キャンペーン */
#top_campaign {
    background-image: url(pic/background.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 990px;
    position: relative;
    overflow-wrap: break-word;
}
.top_campaign_inner {
    position: absolute;
    width: 1080px;
    max-width: 99%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: rgba( 244, 240, 227, .85);
    border-radius: 30px;
}
.top_campaign_inner h3 {
    font-size: 45px;
    text-align: center;
    margin-top: 37px;
    margin-bottom: 22px;
}
.top_campaign_block {
    display: flex;
    justify-content: space-around;
    width: 924px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 70px 0;
}
.top_campaign_p_box {
    width: 370px;
}
.top_campaign_h {
    color: #5D5049;
    font-size: 35px;
    text-align: center;
    border-bottom: solid #8C0C04 1px;
    width: fit-content;
    margin: 0 auto;
}
.top_campaign_p {
    color: #5D5049;
    font-size: 20px;
    text-align: left;
    height: 150px;
    padding: 40px 10px;
}
.ttop_campaign_img img {
    max-width: 95%;
    width: 370px;
}
.ttop_campaign_img {
    text-align: center;
}

/* トップメニュー */
#top_menu {
    background-color: #f7ebe5;
    text-align: center;
}
.top_menu_container {
    width: 1310px;
    margin: 0 auto;
    max-width: 99%;
}
.top_menu_block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-top: 80px;
    padding-bottom: 188px;
    gap: 55px;
}
.top_menu_block img {
    max-width: 100%;
}
#top_news_block {
    background-color: #f7ebe5;
}
.top_news_container {
    width: 900px;
    max-width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: left;
    align-items: baseline;
    gap: 5%;
    padding-top:50px;
}
.news_inner h2 {
    margin: 1rem 0;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
.news_inner img {
    width: 100px;
    max-width: 100%;
    transform: rotate(20deg);
}
.news_wrapper {
    width: 700px;
    max-width: 100%;
}
#top_news {
    border-top: #292929 1px dotted;
}
.news_li {
    border-bottom: #292929 1px dotted;
    padding: 15px 0;
}
.news_day {
    font-size: 10px;
    margin-bottom: .2em;
}



/* aboutページ */
#about_article {
    background-color: #F4F0E3;
    text-align: center;
}
#about_article h3 {
    padding: 75px 0;
    font-size: 30px;
    font-weight: normal;
}
#about_article p {
    font-size: 20px;
    margin-top: 35px;
}
.about_container {
    width: 1165px;
    max-width: 100%;
    margin: 0 auto;
}
.about_container h2 {
    text-align: center;
}
.about_article_list li {
    padding-bottom: 1em;
    color: #5D5049;
}
#about_section {
    background-color: #F4F0E3;
    padding-bottom: 50px;
}
.about_copy {
    width: 650px;
    max-width: 100%;
    margin: 90px 0 77px 0;
}
.about_section_table {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2%;
    margin: 0 5px;
}
.about_section_table_list {
    max-width: 500px;
    margin: 0 auto;
}
.about_img {
    max-width: 100%;
}
.about_p {
    padding-bottom: 18%;
}
#about_aside {
    background-color: #F4F0E3;
}
.about_aside_table {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 76px;
}
.about_aside_sentence {
    width: 450px;
    max-width: 100%;
}
.about_aside_sentence h4 {
    text-align: center;
    font-size: 25px;
}
.about_aside_sentence p {
    padding-top: 10%;
}
.about_aside_pic img {
    width: 450px;
    max-width: 100%;
}
#about_aside a {
    text-align: center;
    font-size: 90%;
    display: block;
    margin: 10px auto;
    border-radius: 50px;
    padding: 10px 0;
    background: #99686a;
    color: #F4F0E3;
    width: 230px;
    max-width: 98%;
}
#about_aside a:hover {
    background: #b79596;
}


/*  クラスページ */
.class_background_white {
    background-color: #FBFBFB;
}
.class_background_yellow {
    background-color: #F4F0E3;
}
.class_background_pink {
    background-color: #f7ebe5;
}
#child {
    background-color: #FBFBFB;
    text-align: center;
}
#adult {
    text-align: center;
}
.h4_class {
    font-weight: normal;
    font-size: 38px;
}
.anchor {
    padding-top: 124px;
    margin-top: -124px;
}
.class_container {
    width: 1420px;
    max-width: 100%;
    margin: 0 auto;
}
.class_listbox {
    width: 900px;
    max-width: 92%;
    margin: 0 auto;
    padding: 95px 0;
}
.class_listbox h4 {
    font-size: 25px;
    font-weight: normal;
}
.class_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    text-align: center;
}
.class_list_margin {
    margin-top: 36px;
    margin-bottom: 67px;
}
.class_btn {
    display: block;
    background: #FAF0F1;
    border-radius: 15px;
    padding: 10px 0;
}
.class_btn_b {
    display: block;
    background: #F4F0E3;
    border-radius: 15px;
    padding: 10px 0;
}
.class_btn_c {
    color: #FBFBFB;
    display: inline-block;
    background: #5D5049;
    border-radius: 15px;
    padding: 10px 0;
    width: 143.5px;
    text-align: center;
}
.topback_arrow {
    position: fixed;
    right: 10%;
    bottom: 10%;
    width: 80px;
    height: 80px;
    background-color: rgba( 101, 58, 60, .9);
    border-radius: 50%;
    text-align: center;
}
.topback_arrow img {
    margin-top: 10px;
}
.class_section_box {
    display: flex;
    justify-content: space-around;
    padding: 70px 0;
}
.class_section_box_reverse {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    padding: 70px 0;
}
.class_list_pic {
    width: 700px;
    max-width: 100%;
}
.class_section_block {
    max-width: 700px;
    background-color: rgba(251, 251, 251, .5);
    font-size: clamp(12px, 1.5vw, 16px);
}
.class_section_block_wrapper {
    display: flex;
    flex-direction: column;
    margin: 20px;
}
.class_day_table {
    display: flex;
    justify-content: space-around;
}
.class_separation {
    padding-top: 100px;
}
.class_section_block_wrapper p {
    font-size: 14px;
}
.class_day_table li {
    font-size: 15px;
}

/* 講師紹介 */
.teacher_container {
    width: 1100px;
    max-width: 95%;
    margin: 0 auto;
}
.teacher_block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3%;
    row-gap: 5%;
    margin: 0 auto;
    padding-bottom: 25%;
}
.teacher_card {
    max-width: 100%;
    padding: 0 2%;
    border-radius: 35px;
    padding: 30px 15px;
    border: #99686a 1px solid;
}
.teacher_img {
    text-align: center;
    margin: 2rem;
}
.teacher_img img {
    max-width: 100%;
}
.teacher_card dt {
    font-size: 30px;
}
.teacher_card dl {
    font-size: 14.5px;
}
.top_dd {
    margin: 1rem 0 2rem 0;  
}
.comment {
    font-weight: bold;
    font-size: 16px;
    color: #99686a;
}
.t_size {
    font-size: 80%;
}
.teacher_container h3 {
    font-size: 20px;
    margin-bottom: .5rem;
}

/* 料金 */
#price {
    background-color: #F4F0E3;
}
#price p {
    font-size: 90%;
}
#price h2 {
    font-size: 30px;
    padding: 50px 0 75px 0;
}
#price h3 {
    font-size: 25px;
    text-align: center;
}
.price_container {
    width: 1260px;
    max-width: 95%;
    margin: 0 auto;
}
.price_table {
    width: 100%;
    margin: 10px auto;
    border-collapse: collapse;
    background-color: #FBFBFB;
    border: solid 1px #bdbdbd;
}
.price_table th {
    text-align: center;
    border-bottom: solid 1px #bdbdbd;
    background-color: #f0e5e5;
    padding: 15px;
}
.price_table td {
    text-align: center;
    border-bottom: solid 1px #bdbdbd;
    padding: 15px;
}
.child_price, .adult_price {
    padding-bottom: 60px;
}
#rule {
    background-color: #F4F0E3;
    padding-bottom: 40px;
}
.rule_list {
    margin-top: 90px;
}
.rule_list h4 {
    border-bottom: .5px solid #99686a;
    width: 100%;
    margin-bottom: 0.5em;
    font-size: 105%
}
.price_pay, .price_time, .price_admission, .price_withdrawal {
    margin-bottom: 40px;
}
.price_aside {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 75px;
    width: 1000px;
    max-width: 100%;
    margin: 0 auto;
}
.price_aside_p_box {
    width: 400px;
    max-width: 100%;
}
.price_aside img {
    width: 400px;
    max-width: 100%;
    padding-right: 5%;
}
.price_aside a {
    text-align: center;
    display: block;
    border-radius: 0px;
    padding: 10px 10px;
    background: #99686a;
    color: #F4F0E3;
    width: 200px;
    max-width: 100%;
    margin: 0 auto;
}
.price_aside a:hover {
    background: #b79596;
}
.price_p_cost {
    font-weight: bold;
}


/* 体験 */
#trial_top {
    background-color: #F4F0E3;
    padding: 25px;
}
.trial_top_container {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
}
.trial_top_inner {
    max-width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.trial_top_inner h2 {
    font-size: 30px;
}
.trial_top_inner img {
    width: 350px;
    max-width: 100%;
}
#trial_article {
    background-color: #F4F0E3;
}
.trial_article_container {
    width: 1100px;
    max-width: 98%;
    margin: 0 auto;
}
.trial_article_container h2 {
    font-size: 35px;
}
.trial_article_container span {
    font-size: 27px;
}
.tarial_article_box {
    width: 900px;
    max-width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
}
.tarial_article_box a {
    display: block;
    color: #FBFBFB;
    background-color: #99686a;
    padding: 10px 50px;
    border-radius: 5px;
}
.tarial_article_box a:hover {
    background: #b79596;
}
.tel {
    pointer-events: none;
}
.trial_article_inner {
    padding: 30px 0;
}
.trial_article_sub {
    padding-bottom: 100px;
}
.trial_article_sub h3 {
    font-size: 20px;
    font-weight: bold;
}
.trial_article_sub_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.trial_article_sub_inner img {
    width: 300px;
    max-width: 100%;
}
.trial_article_sub_li {
    padding-left: 1.5em;
    margin-bottom: .5rem;
}
.trial_article_sub_li li {
    list-style: disc;
    color: #5D5049;
}
.trial_belongings {
    padding: 1rem 0;
}
.pre_trial {
    margin-bottom: 2rem;
    border: #292929 1px dotted;
    padding: 20px;
}
.trial_span {
    font-size: 12px;
}


/* 教室案内 */
.school {
    background-color: #F4F0E3;
}
.school_container {
    width: 1175px;
    max-width: 95%;
    margin: 0 auto;
}
.school_container h2 {
    padding-top: 100px;
    font-size: 30px;
    border-bottom: 2px solid #707070;
}
.school_wrapper {
    margin-top: 120px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 4rem;
}
.school_info {
    text-align: center;
}
.school_info ul {
    color: #5D5049;
}
.school_info li {
    text-align: left;
}
.school_info_container img {
    width: 400px;
    max-width: 100%;
}
.company {
    margin: 75px 0;
}
.company_table {
    margin: 10px auto;
    max-width: 100%;
} 
.company_table td {
    padding: 5px 50px;
    border-bottom: dotted 1px #bdbdbd;
    border-top: dotted 1px #bdbdbd;
    color: #5D5049;
}
.history {
    padding-bottom: 100px;
    margin: 30px auto 0 auto;
}
.history h3 {
    font-size: 20px;
    font-weight: bold;
}
/* 親要素にtableがいるんですね */
.history_list ul {
    display: table;
}
.history_list li {
    font-size: 90%;
    padding: .5em 0;
    border-bottom: dotted 1px #bdbdbd;
}
.history_list span {
    display: table-cell;
    width: 100px;
    color: #5D5049;
}
.history_list p {
    display: table-cell;
    color: #5D5049;
}
.school_img {
    margin-top: 75px;
    background-color: #F4F0E3;
}
.school_img img {
    max-width: 100%;
}
.school_detail_yahagi, .school_detail_kariya {
    display: none;
}


/* 教室詳細 */
.top_classroom {
    background-color: #F4F0E3;
}
.top_classroom img {
    width: 100%;
}
.classroom_article {
    background-color: #F4F0E3;
}
.classroom_container {
    width: 1175px;
    max-width: 90%;
    margin: 0 auto;
    padding: 80px 0;
}
.cls_wrapper {
    border: #292929 1px solid;
    padding: 40px 80px;
    border-radius: 40px;
}
.classroom_container h2 {
    padding: 10px 0;
    font-size: 50px;
    font-weight: bold;
}
.classroom_p {
    padding: 20px 0 30px 0;
}
.cls_time {
    padding-top: 1rem;
}
.poem {
    font-size: 15px;
    font-style: oblique;
}
.classroom_pic_container {
    display: flex;
    justify-content: space-between;
    max-width: 100%;
    margin-top: 50px;
}
.classroom_img img {
    width: 350px;
    max-width: 99%
}
.classroom_map {
    margin-top: 50px;
}
.classroom_map iframe {
    max-width: 100%;
}
.classroom_map_p {
    padding: 10px 0;
    font-size: 80%;
    text-align: center;
}


/* お問合せフォーム */
#contact {
    background-color: #F4F0E3;
    padding-bottom: 50px;
}
.contact_container {
    width: 1050px;
    max-width: 90%;
    margin: 0 auto;
}
.contact_container h2 {
    padding: 50px 0 25px 0;
    font-size: 35px;
}
.contact_caution {
    padding: 30px;
    border: 1px solid #5D5049;
    border-radius: 10px;
}
.contact_caution_wrapper {
    width: 900px;
    max-width: 100%;
    margin: 0 auto;
}
.contact_privacy {
    text-decoration: underline;
}
.contact_link {
    display: block;
    color: #f0e5e5;
    background-color: #99686a;
    padding: 10px;
    border-radius: 5px;
    width: fit-content;
    margin-top: 10px;
}
.contact_link:hover {
    background-color: #b79596;
    color: #f0e5e5;
}
.contact_form {
    margin-top: 50px;
    margin: 0 auto;
    padding: 50px 0;
}
.message_box {
    margin: 30px 0;
}
label {
    display: block;
    color: #5D5049;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"] {
    box-sizing:border-box;
    padding: 15px;
    width: 100%;
    border-radius: 5px;
}
input[type="radio"] {
    margin: 0 5px;
}
select[name="教室"],
select[name="ご職業"],
select[name="当スクールを知ったきっかけ"] {
    width: 200px;
    border-radius: 5px;
    padding: 15px;
}
.contact_text {
    box-sizing:border-box;
    width: 100%;
    padding: 15px;
    font-size:150%;
    height: 8em;
    border-radius: 5px;
}
input[type="submit"] {
    background-color: #99686a;
    color: #bdbdbd;
    padding: 15px 45px;
    border-radius: 5px;
}
.message_box_btn {
    text-align: center;
    margin-top: 50px;
}
.message_button:hover {
    background: #b79596;
}
.company_table tbody {
    max-width: 100%;
}
.ms_span {
    color: #ad0e02
}
.form_confirmation_container {
    width: 700px;
    margin: 0 auto;
    max-width: 90%;
}
.form_confirmation {
    border: #5D5049 1px solid;
    padding: 20px;
    border-radius: 25px;
}
.form_confirmation ul {
    padding-left: 20px;
}
.form_confirmation li {
    color: #5D5049;
    font-size: 14px;
    list-style: disc;
}
.contact_btn {
    display: block;
    width: fit-content;
    padding: 8px 20px;
    color: #bdbdbd;
    background-color: #99686a;
    border-radius: 15px;
    margin-top: 1em;
}
.thanks_to_top {
    text-decoration: underline;
}


/* プライバシーポリシー */
#privacy {
    background-color: #F4F0E3;
    padding: 50px 0;
}
.privacy_container {
    width: 1100px;
    max-width: 98%;
    margin: 0 auto;
}
.privacy_title {
    text-align: center;
}
.privacy_title h2 {
    font-size: 30px;
}
.privacy_title_p {
    font-size: 20px;
}
.contact_caution {
    margin: 40px 0;
}
.contact_caution_wrapper h3 {
    font-size: 20px;
}
.left {
    text-align: left;
}
.privacy_wrapper {
    width: 975px;
    max-width: 98%;
    margin: 70px auto;

}
.privacy_box {
    margin-top: 4rem;
}
.privacy_box h4 {
    font-size: 20px;
    font-weight: bold;
    border-bottom: #5D5049 solid 1px;
    width: 100%;
}
.privacy_box p {
    margin: .8rem 0;
}

/* イベント紹介 */
#event_top {
    background-color: #F4F0E3;
}
.event_container {
    width: 1100px;
    max-width: 95%;
    margin: 0 auto;
}
.event_container h2 {
    font-size: 30px;
}
.event_container h3 {
    font-size: 25px;
    text-align: center;
    border-bottom: 1px solid;
    margin: 0 auto;
    width: max-content;
}
.event_pic {
    max-width: 100%;
    width: 300px;
}
.event_top_wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 50px 0 40px 0;
}
#recital {
    background-color: #F4F0E3;
    padding: 40px 0;
}
.recital_wrapper {
    display: flex;
    flex-direction: column;
}
.event_border {
    border: #292929 1px solid;
    border-radius: 20px;
    padding: 40px 20px 20px 20px;
    max-width: 100%;
}
.recital_box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 60px;
    gap: 1rem;
}
.recital_box_reverse {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly;
    align-items: center;
    margin: 60px 0 100px 0;
    gap: 1rem;
}
#other_event {
    background-color: #F4F0E3;
    padding: 20px 0 100px 0;
}
.grid_container {
    margin: 0 auto;
    max-width: 100%;
}
.event_grid_box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 30px auto 20px 0;
    padding: 10px;
    max-width: 100%;
    gap: 5px;
}
.grid_wrapper {
    margin: 0 auto;
    text-align: center;
    font-weight: bold;
}
.other_event_p {
    margin: 40px 0 60px 0;
}

/* 男の子募集 */
#boy {
    background-color: #F4F0E3;
}
.boy_copy {
    text-align: center;
    margin: 70px 0 30px 0;
    font-size: 35px;
}
.boy_copy h2 {
    color: #0081AE;
    font-weight: bold;
} 
.boy_copy_p_1 {
    color: whitesmoke;
    font-weight: bold;
}
.boy_copy_p_2 {
    color: #0081AE;
    font-weight: bold;
}
.boy_p_blue {
    display: inline-block;
    background-color: #0081AE;
    width: 55px;
    border-radius: 50%;
    padding: 10px;
    left: 500px;
}
.boy_p_blue2 {
    display: inline-block;
    background-color: #0081AE;
    width: 55px;
    border-radius: 50%;
    padding: 10px;
}
.boy_p_yellow {
    display: inline-block;
    color: #0081AE;
    background-color: #FFF06B;
    width: 55px;
    border-radius: 50%;
    padding: 10px;
}
.boy_block {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 60px;
}
.boy_pic_container {
    margin: 0 1%;
}
.boy_pic_back {
    position: relative;
    background-color: #FFF06B;
    border-radius: 50%;
    height: 370px;
    width: 370px;
}
.boy_pic_circle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 350px;
    height: auto;
    max-width: 100%;
}
.boy_article {
    margin: 0 1%;
}
.boy_article h3 {
    font-size: 20px;
}
.boy_article span {
    color: #0081AE;
    font-size: 35px;
}
.boy_article_p {
    margin-bottom: 1.5rem;
}
.boy_article_p p {
    border-bottom: #5D5049 1px dotted;
}
.boy_price p {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
.boy_price_box {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 1rem;
}
.boy_price_box_p h4 {
    font-size: 25px;
    text-align: center;
}
.boy_price_box_p p {
    font-size: 15px;
    font-weight: normal;
}
.boy_pricetag h3 {
    color: #0081AE;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 45px;
}
.boy_class {
    display: block;
    padding: .15rem 0;
    background-color: #CF5B50;
    border-radius: 20px;
}
.boy_class p {
    font-size: 15px;
    font-weight: normal;
    color: #FFFFFF;
    text-align: center;
}
.boy_price table {
    margin: 0 auto;
}
.boy_price td {
    font-size: 15px;
    padding: 0 1rem;
}
.boy_trial {
    padding: 1.5rem 0 7rem 0;
}
.boy_trial_box {
    display: block;
    background-color: #0081AE;
    width: 700px;
    max-width: 95%;
    margin: 0 auto;
    border-radius: 50px;
    padding: 20px 0px;
    text-align: center;
}
.boy_trial_box h3 {
    color: whitesmoke;
    font-size: 30px;
    margin-bottom: .5rem;
}
.boy_trial_box a {
    color: whitesmoke;
    text-decoration: underline;
}
.boy_trial_box p {
    color: whitesmoke;
    font-size: 15px;
    text-align: left;
}
.boy_p_box {
    display: inline-block;
    text-align: left;
    max-width: 95%;
}

/* キャンペーンのご案内 */
#campaign {
    background-color: #F4F0E3; 
}
#campaign_container {
    width: 1000px;
    max-width: 95%;
    margin: 0 auto;
    padding-bottom: 100px;
}
.campaign_box {
    padding-top: 50px;
}
.campaign_box h2 {
    font-size: 20px;
    border-bottom: #5D5049 1px solid;
}
.campaign_wrapper {
    margin: 12px 0;
}
.campaign_wrapper h3 {
    width: 470px;
    max-width: 100%;
    margin: 35px auto 0 auto;
    font-size: 25px;
    text-align: center;
    border: #5D5049 1px solid;
    border-radius: 10px;
}
.campaign_price_box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1000px;
    max-width: 100%;
    margin: 0 auto 50px auto;
}
.campaign_price_box p {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.cmp_prc_1 {
    color: #292929;
    font-size: 38px;
}
.cmp_prc_2 {
    color: #292929;
    font-size: 50px;
    padding: 0 .5em;
    font-weight: bold;
}
.cmp_prc_3 {
    color: #CF5050;
    font-size: 55px;
    font-weight: bold;
    border-bottom: #CF5050 thick double;
}
.yen {
    font-size: 22px;
}
.cmp_prc_p h4 {
    color: #CF5050;
    font-size: 120%;
}
.cmp_prc_p p {
    font-size: 14px;
}
.cmap_goods_box {
    margin: 25px auto;
    width: 900px;
    max-width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.puppy_campaign_pic {
    width: 143px;
}
.cmp_pic_block {
    width: 375px;
    height: 375px;
    position: relative;
    max-width: 100%;
}
.cmp_pic_block img {
    width: 250px;
    max-width: 100%;
}
.cmp_pic_1 {
    position: absolute;
    top: 0;
    left: 0;
}
.cmp_pic_2 {
    position: absolute;
    top: calc(100% / 3);
    left: calc(100% / 3);
}
.cmp_caution {
    margin-top: .5em;
}
.cmp_caution p {
    font-size: 14px;
}


/* ヘッダー */
.header {
    background: #99686a;
    margin: 0 auto;
    padding: 15px 25px 15px 25px;
    position: sticky;
    top: 0;
    z-index: 2;
}
.logo {
    width: 350px;
    max-width: 50vw;
}
.nav_container {
    display: flex;
    justify-content: space-between;
}

/* ハンバーガー */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 45px;
    height: 45px;
    padding: 10px;
    background: #5D5049;
    border: 0;
    color: #fff;
    cursor: pointer;
    z-index: 1;
  }

/*三本線*/
.hamburger__line {
    position: relative;
    top: 12px;
    width: 30px;
    height: 2px;
    background: #fff;
}
.hamburger__line::before,
.hamburger__line::after {
    position: absolute;
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background: #fff;
    transition: 0.3s;
}
.hamburger__line::before {
    top: -8px;
}
.hamburger__line::after {
    bottom: -8px;
}
  
/*OPEN時スタイル*/
.hamburger[aria-expanded="true"] .hamburger__line{
    background: transparent;
}
.hamburger[aria-expanded="true"] .hamburger__line::before {
    top: 0;
    transform: rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger__line::after {
    bottom: 0;
    transform: rotate(-45deg);
}
/* 2026年6月更新 */
/* デフォルト（PC含む）では非表示 */
.fix_bottom {
    display: none;
}
/* ↑ここまで2026年6月更新 */



/* ヘッダーPC用設定 */
@media screen and (min-width: 960px) {
    .gnav {
        display: block !important;
    }
    .gnav__list {
        display: flex;
        justify-content: space-between;
        margin: 0 45px;
    }
    .gnav__item {
      margin: 0 1em;
    }
    .gnav__link {
        display: block;
        padding-top: 10px;
        color: #FFFFFF;
        font-size: 15px;
    }
    .nav_container {
        width: 1650px;
        margin: 0 auto;
        max-width: 100%;
        flex-direction: column;
        justify-content: flex-start;
    }
    .gnav_none {
        display: none;
    }
    .hamburger {
        display: none;
    }
}

/* スマートフォン用 */
@media screen and (max-width: 959px) {
    .gnav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(100vh - 75px);
        padding: 75px 0;
        background: rgba( 250, 250, 240, .98);
        text-align: center;
        overflow-y: auto;
    }
    .gnav__list {
        border-top: 1px dashed #aaa;
    }
    .gnav__item {
        border-bottom: 1px dashed #aaa;
    }
    .gnav__link {
        display: block;
        padding: 10px;
        font-weight: bold;
    }
    .nav_container {
        align-items: center;
    }
    .teacher_block {
        grid-template-columns: repeat(2, 1fr);
    }
    .history {
        max-width: 97.5%;
    }
    .cls_wrapper {
        padding: 20px 40px;
    }
    .classroom_container h2 {
        font-size: 35px;
    }
}
@media (max-width:700px) {
    .pc_top {
        display: none;
    }
    .sp_top {
        display: block;
    }
    .bg-slider_sp {
        background-repeat: no-repeat;
        background-size: cover;
        height: 700px;
        background-position: center;
    }
    .top_sub {
        background-image: url(pic/0Q1A9493.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 40% top;
        height: 38vh;
    }
    .backgrand_set {
        background-repeat: no-repeat;
        background-size: cover;
        height: 38vh;
    }
    .bg_about {
        background-image: url(pic/0Q1A9833.jpg);
        background-position: 50% top;
    }
    .bg_price {
        background-image: url(pic/0Q1A9608.jpg);
        background-position: 65% top;
    }
    .bg_boy {
        background-image: url(pic/DSC7192.jpg);
        background-position: 45% top;
    }
    .bg_cmp {
        background-image: url(pic/puppy-41.jpg);
        background-position: 50% top;
    }
    .bg_class {
        background-image: url(pic/0Q1A9480.jpg);
        background-position: 50% top;
    }
    .bg_cntct {
        background-image: url(pic/puppy83.jpg);
        background-position: 47% top;
    }
    .bg_applctn {
        background-image: url(pic/0Q1A9849.jpg);
        background-position: 47% top;
    }
    .bg_event {
        background-image: url(pic/DSC_1918.jpg);
        background-position: 40% top;
    }
    .bg_prvcy {
        background-image: url(pic/0Q1A9515.jpg);
        background-position: 60% top;
    }
    .bg_school {
        background-image: url(pic/0Q1A9349.jpg);
        background-position: 43% top;
    }
    .bg_trial {
        background-image: url(pic/0Q1A9595.jpg);
        background-position: 47% top;
    }
    .bg_thanks {
        background-image: url(pic/puppy-24.jpg);
        background-position: 50% top;
    }
    .kariya_pic {
        background-image: url(pic/0Q1A9894.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 44% 0;
        height: 60vh;
    }
    .yahagi_pic {
        background-image: url(pic/0Q1A9882.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 82% 0;
        height: 60vh;
    }
    p, a {
        font-size: 82.5%;
    }
    li {
        font-size: 90%;
    }
    .top_main img, .top_sub img, .top_back img{
        display: none;
    }
    .logo_sub {
        padding-top: 85px;
    }
    .top_catch_box {
        flex-direction: column;
        align-items: center;
        padding-top: 25px;
        padding-bottom: 100px;
    }
    .top_campaign_inner {
        border-radius: 0;
        max-width: 100%;
    }
    #top_catch a {
        margin: 30px auto 35px auto;
    }
    .top_campaign_block {
        flex-direction: column;
        align-items: center;
        gap: 4rem;
    }
    .classroom_pic {
        display: none;
    }
    .top_campaign_h {
        margin-top: 0;
        padding-bottom: 10px;
        font-size: 30px;
    }
    .top_campaign_p_box {
        max-width: 100%
    }
    .top_campaign_p {
        padding: 10px 40px;
        font-size: 1rem;
        height: auto;
    }
    .top_campaign_block img {
        max-width: 85%;
    }
    .top_news_container {
        max-width: 90%;
        align-items: flex-start;
    }
    .news_inner h2 {
        writing-mode: vertical-rl;
    }
    .news_inner img {
        width: 50px;
        transform: rotate(0deg);
        margin-bottom: .5rem;
    }
    .news_day {
        margin-bottom: 0;
    }
    .top_menu_block {
        display: block;
        padding-top: 50px;
        padding-bottom: 100px;
    }
    .top_menu_block img {
        max-width: 82.5%;
    }
    .top_menu_block li {
        margin-bottom: 10px;
    }
    .top_group_school {
        flex-direction: column;
        align-items: center;
    }
    .puppy_group {
        display: block;
    }
    .group_btn {
        width: 250px;
        margin: 0 auto;
        max-width: 100%;
    }
    .top_group_puppy h3 {
        font-size: 25px;
        margin-bottom: 0;
        text-align: center;
    }
    .puppy_group li {
        padding: 10px 0;
    }
    .top_group_yahagi {
        padding-bottom: 25px;
    }
    .top_relations_logo {
        margin-bottom: 50px;
        text-align: center;
    }
    .top_relations_logo img {
        max-width: 85%;
    }
    .top_group_puppy {
        padding-bottom: 55px;
    }
    .about_section_table {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .about_container, .about_container {
        max-width: 90%;
        margin: 0 auto;
    }
    .about_p {
        padding-bottom: 20px;
    }
    .about_aside_sentence h4 {
        font-size: 15px;
    }
    .about_aside_table {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    .anchor {
        padding-top: 75px;
        margin-top: -75px;
    }
    .class_list {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .class_list li {
        width: 280px;
        max-width: 100%;
        font-size: 14px;
    }
    .teacher_center {
        text-align: center;
    }
    .teacher_center a {
        max-width: 100%;
    }
    .class_section_box, .class_section_box_reverse {
        flex-direction: column;
        align-items: center;
    }
    .teacher_block {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .class_listbox {
        padding: 35px 0;
    }
    .class_separation {
        padding-top: 35px;
    }
    .teacher_container {
        max-width: 92.5%;
    }
    .teacher_card {
        margin-bottom: 50px;
    }
    .teacher_card dt {
        margin: 15px 0 5px 0;
        font-size: 22px;
    }
    .teacher_card dl {
        font-size: 14px;
    }
    .top_dd {
        margin-bottom: 1.5rem;
    }
    .topback_arrow {
        width: 50px;
        height: 50px;
    }
    .topback_arrow img {
        width: 62.5%;
        margin-top: 4px;
    }
    .price_table th, .price_table td {
        padding: 2px;
        font-size: 70%;
    }
    .price_aside {
        flex-direction: column-reverse;
        align-items: center;
    }
    .price_aside img {
        padding-right: 0;
    }
    .price_aside_p_box {
        margin-bottom: 30px;
    }
    .trial_top_container, .trial_article_container {
        max-width: 85%;
        margin: 0 auto;
    }
    .trial_top_inner {
        flex-direction: column;
    }
    .tarial_article_box {
        flex-direction: column;
    }
    .tel {
        pointer-events: auto;
        margin-top: 20px;
    }
    .trial_article_sub_inner {
        flex-direction: column;
    }
    .classroom_pic_container {
        flex-direction: column;
        align-items: center;
    }
    .classroom_img img {
        max-width: 100%;
        margin: 10px 0;
    }
    .company_table td {
        padding: 5px 15px;
        font-size: 95%;
    }
    .company {
        margin: 50px 0;
    }
    .boy_copy {
        margin-top: 30px;
    }
    .boy_block {
        flex-direction: column;
    }
    .boy_pic_back {
        width: 270px;
        height: 270px;
    }
    .boy_pic_circle {
        width: 250px;
    }
    .boy_article h3 {
        text-align: center;
    }
    .boy_article_p p {
        font-size: 95%;
        border-bottom: #5D5049 .5px dotted;
    }
    .boy_trial_box h3 {
        font-size: 28px;
    }
    .boy_trial {
        padding: 0 0 5rem 0;
    }
    .campaign_box {
        padding: 15px 0;
    }
    .cmap_goods_box p {
        font-size: .95em;
    }
    .campaign_price_box {
        flex-direction: column;
    }
    .campaign_wrapper h3 {
        width: 250px;
        margin: 25px auto 5px auto;
        font-size: 20px;
    }
    .cmp_prc_2 {
        transform: rotate(90deg);
    }
    .cmap_goods_box {
        margin: 20px auto;
        flex-direction: column;
        align-items: flex-start;
    }
    .cmp_pic_block {
        width: 300px;
        height: 300px;
        margin: 0 auto;
    }
    .cmp_pic_block img {
        width: 200px;
    }
    .cmp_p_block {
        margin: 1rem 0;
    }
    .cmp_caution {
        margin-top: .5em;
    }
    .cmp_caution p {
        font-size: 14px;
    }
    .puppy_campaign_pic {
        width: 110px;
    }
    .cmp_puppy_sp {
        margin: 2em auto 0 auto;
    }
    .campaign_box h2 {
        font-size: 18px;
    }
    .boy_block_container h2 {
        font-size: 22px;
    }
    .boy_block_container h3 {
        font-size: 25px;
    }
    .event_pic_sp {
        width: 125px;
    }
    .event_container h2 {
        font-size: 25px;
    }
    .recital_box, .recital_box_reverse {
        flex-direction: column;
        margin: 40px 0;
        gap: 0;
    }
    .recital_box p, .recital_box_reverse p {
        font-size: 14px;
        margin: .5rem 1rem;
    }
    #other_event {
        padding: 0 0 70px 0;
    }
    .other_event_p {
        margin: 10px 0 40px 0;
    }
    .event_grid_box {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }
    .grid_wrapper p {
        font-size: 15px;
    }
    .other_event_p {
        font-size: 13px;
    }
    .privacy_container {
        max-width: 95%;
    }
    .privacy_wrapper {
        max-width: 85%;
    }
    .contact_caution p, .privacy_box p {
        font-size: 14px;
    }
    .school_wrapper {
        margin-top: 50px;
    }
    .school_container h2 {
        padding-top: 50px;
    }
    .school_img {
        margin-top: 50px;
    }
    .cls_wrapper {
        padding: 20px;
    }
    .classroom_container h2 {
        font-size: 25px;
        padding: 10px 0 0 0;
    }
    .classroom_p {
        font-size: 13px;
    }
    .classroom_pic_container {
        margin-top: 25px;
    }
    .classroom_map {
        margin-top: 25px;
    }
    .classroom_container {
        padding: 40px 0;
    }
    .contact_caution {
        margin: 0;
    }
    .contact_link {
        margin: 10px auto;
    }
    #campaign_container {
        max-width: 90%;
    }
    .about_aside_sentence p {
        font-size: 14px;
    }
    .contact_container h2 {
        font-size: 30px;
    }
    .contact_btn {
        font-size: 13px;
        margin-top: .5rem;
    }
    .news_li a {
        font-size: 14.5px;
    }
    .trial_article_container span {
        font-size: 22px;
    }
    .trial_article_sub_inner img {
        width: 250px;
    }
    .trial_article_sub {
        padding-bottom: 50px;
    }
    .trial_price {
        font-size: 14.5px;
    }
    .trial_article_inner {
        padding: 15px 0;
    }
    .tarial_article_box {
        margin-top: .5rem;
    }
    .pre_trial {
        font-size: 14px;
        margin-bottom: 1.5rem;
        padding: 10px 20px;
    }
    .trial_top_inner {
        gap: .8rem;
    }
    .class_list_margin {
        margin-bottom: 50px;
    }
    #top_catch h2 {
        margin: 30px 0 30px 0;
        font-size: 150%;
    }
    .top_group_school p {
        font-size: 82.5%;
    }
    .top_group_school h4 {
        margin-bottom: 0;
    }
    .top_catch_comment p {
        font-size: 90%;
    }
    #top_catch a {
        font-size: 90%;
        width: 150px;
    }
    .about_copy {
        margin: 77px 0;
    }
    .gnav__item a, li {
        font-size: 100%;
    }
    #price p {
        font-size: 83%;
    }
    .class_day_table li {
        font-size: 13px;
    }
    .trial_price {
        font-size: 82.5%;
    }
    
    /* 2026年6月更新 */
    /* CSS変数 */
    :root {
        --fix-bottom-height: 65px;
    }

    /* 固定CTAバー */
    .fix_bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: var(--fix-bottom-height);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* 中央幅制限 */
    .fix_bottom_container {
        width: 100%;
        max-width: 600px;
    }

    /* 横並び */
    .fix_bottom_li ul {
        display: flex;
        gap: 10px;
        padding: 10px;
        margin: 0;
        list-style: none;
    }

    /* li縦Flex */
    .fix_bottom_li li {
        flex: 1;
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    /* 説明文 */
    .fix_text {
        color: #fff;
        margin-bottom: 0;
        line-height: 1.5;
        font-size: 65%;
    }

    /* ボタン共通 */
    .fix_tel_box, .fix_trial_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 7px 14px;
        gap: 3px;
        color: #fff;
        text-decoration: none;
        transition: 0.2s;
        margin-top: auto;
        font-size: 75%;
    }

    .fix_trial_btn span {
        color: #fff;
    }

    /* 電話 */
    .fix_tel_box {
        background: #99686a;
    }

    /* メール */
    .fix_trial_btn {
        background: #5d5049;
    }

    /* アイコン */
    .fix_tel_icon {
        width: 13px;
    }

    .fix_mail_icon {
        width: 15px;
    }

    /* hover / focus / active */
    .fix_tel_box:hover, .fix_trial_btn:hover {
        color: #fff;
    }

    .fix_tel_box:focus, .fix_trial_btn:focus {
        outline: none;
        opacity: 1;
        transform: none;
    }

    .fix_tel_box:active, .fix_trial_btn:active {
        transform: scale(0.96);
    }

    /* 下部固定分余白 */
    .footer_container {
        padding-bottom: calc(var(--fix-bottom-height) + env(safe-area-inset-bottom));
    }
/* ↑ここまで2026年6月更新 */
}