★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ レイアウト ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { #wrapper{ } main.outer_wrap { position: relative; max-width: none; /* max-width: 1920px; 固定幅レイアウト時 */ width: 100%; min-height: 50vh; display: block; padding: 0 0 80px; margin: 0 auto; } .inner_wrap { position: relative; width: 100%; margin: 0 auto; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { #wrapper { } main.outer_wrap { position: relative; width: 100%; min-height: 50vh; padding: 0 0 12vw; } .inner_wrap { position: relative; width: 100%; padding: 0 4vw; } } /* ================================================================================ マージンボックス ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* 上にマージンを空ける ----------------------------------------------- */ .top_long { margin-top: 120px; } .top_middle { margin-top: 80px; } .top_short { margin-top: 40px; } .top_vshort { margin-top: 20px; } /* 下にマージンを空ける ----------------------------------------------- */ .bottom_long { margin-bottom: 120px; } .bottom_middle { margin-bottom: 80px; } .bottom_short { margin-bottom: 40px; } .bottom_vshort { margin-bottom: 20px; } /* 両方にマージンを空ける ----------------------------------------------- */ .both_long { margin-top: 120px; margin-bottom: 120px; } .both_middle { margin-top: 80px; margin-bottom: 80px; } .both_short { margin-top: 40px; margin-bottom: 40px; } .both_vshort { margin-top: 20px; margin-bottom: 20px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* 上にマージンを空ける ----------------------------------------------- */ .top_long { margin-top: 16vw; } .top_middle { margin-top: 12vw; } .top_short { margin-top: 8vw; } .top_vshort { margin-top: 4vw; } /* 下にマージンを空ける ----------------------------------------------- */ .bottom_long { margin-bottom: 16vw; } .bottom_middle { margin-bottom: 12vw; } .bottom_short { margin-bottom: 8vw; } .bottom_vshort { margin-bottom: 4vw; } /* 両方にマージンを空ける ----------------------------------------------- */ .both_long { margin-top: 16vw; margin-bottom: 16vw; } .both_middle { margin-top: 12vw; margin-bottom: 12vw; } .both_short { margin-top: 8vw; margin-bottom: 8vw; } .both_vshort { margin-top: 4vw; margin-bottom: 4vw; } } /* ================================================================================ パディングボックス ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* 上にパディングを空ける ----------------------------------------------- */ .p_top_long { padding-top: 120px; } .p_top_middle { padding-top: 80px; } .p_top_short { padding-top: 40px; } .p_top_vshort { padding-top: 20px; } /* 下にパディングを空ける ----------------------------------------------- */ .p_bottom_long { padding-bottom: 120px; } .p_bottom_middle { padding-bottom: 80px; } .p_bottom_short { padding-bottom: 40px; } .p_bottom_vshort { padding-bottom: 20px; } /* 両方にパディングを空ける ----------------------------------------------- */ .row_long { padding-top: 120px; padding-bottom: 120px; } .row_middle { padding-top: 80px; padding-bottom: 80px; } .row_short { padding-top: 40px; padding-bottom: 40px; } .row_vshort { padding-top: 20px; padding-bottom: 20px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* 上にパディングを空ける ----------------------------------------------- */ .p_top_long { padding-top: 16vw; } .p_top_middle { padding-top: 12vw; } .p_top_short { padding-top: 8vw; } .p_top_vshort { padding-top: 4vw; } /* 下にパディングを空ける ----------------------------------------------- */ .p_bottom_long { padding-bottom: 16vw; } .p_bottom_middle { padding-bottom: 12vw; } .p_bottom_short { padding-bottom: 8vw; } .p_bottom_vshort { padding-bottom: 4vw; } /* 両方にパディングを空ける ----------------------------------------------- */ .row_long { padding-top: 16vw; padding-bottom: 16vw; } .row_middle { padding-top: 12vw; padding-bottom: 12vw; } .row_short { padding-top: 8vw; padding-bottom: 8vw; } .row_vshort { padding-top: 4vw; padding-bottom: 4vw; } /* 背景色を伸ばす ----------------------------------------------- */ .row_sp { padding-left: 4vw !important; padding-right: 4vw !important; } } /* ================================================================================ メイン画像 ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .main_cate { position: relative; background: url(../img/main-cate.jpg) center bottom / auto auto no-repeat; height: 556px; background-color: #3a58b2; } .main_cate_in { font-family: paralucent, 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; font-weight: bold; text-align: center; color: #fff; letter-spacing: 0.08em; font-size: 60px; padding: 294px 80px 0; } .main_cate_in p:first-letter { color: #9fb7ff; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .main_cate { position: relative; background: url(../img/main-cate_sp.jpg) center top / cover no-repeat; height: 78vw; } .main_cate_in { font-family: paralucent, 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; font-weight: bold; text-align: center; color: #fff; letter-spacing: 0.08em; font-size: 11vw; padding: 30vw 8vw; } .main_cate_in p:first-letter { color: #9fb7ff; } } /* ================================================================================ 見出し ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .cate-h2 { padding: 70px 0; font-family: paralucent, 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; font-size: 70px; font-weight: bold; color: #3a58b2; letter-spacing: 0.08em; text-align: center; } .cate-h3 { font-size: 30px; margin-bottom: 30px!important; } .cate-h3 h3:first-letter { color: #9fb7ff; } .cate-h4 { font-size: 24px; margin-bottom: 20px!important; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .cate-h2 { padding: 9vw 0; font-family: paralucent, 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; font-size: 7.4vw; font-weight: bold; color: #3a58b2; letter-spacing: 0.08em; text-align: center; } .cate-h3 { font-size: 5.3vw; margin-bottom: 4vw!important; } .cate-h3 h3:first-letter { color: #9fb7ff; } .cate-h4 { font-size: 4.8vw; margin-bottom: 4vw!important; } } /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ここから各固定ページ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ 下層共通設定 ================================================================================ */ .btn_sty a { text-align: center; font-weight: 500; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .btn_sty a { border: 2px solid #3a58b2; padding: 15px 40px; font-size: 18px; display: inline-block; } .pc_txt_c { text-align: center; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .col_sp { margin-bottom: 4vw; } .btn_sty a { border: 1px solid #3a58b2; padding: 2.5vw 0; font-size: 4vw; width: 80%; margin: 0 auto; display: block; } .sp_txt_c { text-align: center; } } /* ================================================================================ 02COURSE ================================================================================ */ .trial_coursebox { color: #FFF; background: #3A58B2; } .trial_coursebox .trial_promotion { text-align: center; border: solid 2px #FFF; background: #6982cf; line-height: 1.5; } .trial_coursebox .trial_promotion em { display: block; font-style: normal; background: #FFF; color: #3A58B2; } .trial_coursebox .trial_promotion span { display: block; font-weight: 700; } .col_courselink { text-align: center; line-height: 1.4; } .col_courselink a { color: #3A58B2; display: block; } .col_courselink a:hover { background: #3A58B2; color: #FFF; opacity: 1; } .col_courselink span { display: block; font-weight: 700; } .tb_course table { width: 100%; } .tb_course table th { background: #3A58B2; color: #FFF; vertical-align: middle; } .tb_course table td { background: #FFF; } .tb_course table td li { list-style: circle; } .tb_course table td:last-child { vertical-align: bottom; } .col_course_pricebox { background: #FFF; text-align: center; } .col_course_pricebox span { display: block; font-weight: 700; } .col_course_pricebox em { display: block; font-style: normal; font-weight: 700; color: #3A58B2; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .trial_coursebox { padding: 25px; font-size: 18px; } .trial_coursebox .trial_promotion { padding-bottom: 20px; } .trial_coursebox .trial_promotion em { padding: 5px; margin-bottom: 10px; } .trial_coursebox .trial_promotion span { font-size: 40px; } .col_courselink { font-size: 18px; } .col_courselink a { padding: 65px 10px; border: solid 4px #3A58B2; } .col_courselink span { font-size: 30px; } .tb_course table { border: solid 4px #3A58B2; } .tb_course table th { padding: 20px; font-size: 20px; width: 500px; box-sizing: border-box; } .tb_course table td { padding: 20px 30px; font-size: 18px; } .tb_course table td:last-child { width: 60px; } .tb_course table td ul { margin-left: 20px; } .col_course_pricebox { border: solid 4px #3A58B2; padding: 25px; } .col_course_pricebox span { font-size: 24px; } .col_course_pricebox em { font-size: 30px; margin-top: 5px; } .ticket_table,.ticket_table_f,.kosupa_table,.kosupa_table_f,.coming_table{ width: 50%!important; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .trial_coursebox { padding: 5vw; } .trial_coursebox .trial_promotion { padding-bottom: 4vw; margin-bottom: 4vw } .elementor-row .trial_promotion:last-child { margin-bottom: 0; } .trial_coursebox .trial_promotion em { padding: 1.5vw; margin-bottom: 2vw; } .trial_coursebox .trial_promotion span { font-size: 5.8vw; } .col_courselink { font-size: 4.2vw; margin-bottom: 4vw } .elementor-row .col_courselink:last-child { margin-bottom: 0; } .col_courselink a { padding: 6vw 4vw; border: solid 2px #3A58B2; } .col_courselink span { font-size: 5.3vw; } .tb_course table { border: solid 2px #3A58B2; } .tb_course table th { font-size: 4.4vw; width: 100%; display: block; padding: 3vw 0; } .tb_course table td { font-size: 4.2vw; padding: 3vw 3vw 0 3vw; width: 100%; display: block; } .tb_course table td:last-child { padding: 0 3vw 3vw 3vw; text-align: right; } .tb_course table td ul { margin-left: 4vw; } .col_course_pricebox { border: solid 2px #3A58B2; padding: 4vw; margin-bottom: 4vw; } .elementor-row .col_course_pricebox:last-child { margin-bottom: 0; } .col_course_pricebox span { font-size: 4.8vw; } .col_course_pricebox em { font-size: 5.3vw; margin-top: 1vw; } } /* ================================================================================ 03FLOW ================================================================================ */ .page-flow .outer_wrap { padding-bottom: 0; } .tit_step { text-align: center; } .tit_step span { display: block; color: #3a58b2; font-family: paralucent, 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; } .bg_blue { background: #d2dbf7; } .bg_blue .cate-h3 h3:first-letter { color: #3a58b2; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .tit_step { font-size: 30px; margin-bottom: 30px!important; } .tit_step span { font-size: 26px; margin-bottom: 10px; } .bg_blue { padding: 80px 0; } .img_flow { margin-bottom: 30px!important; } .img_flow img { max-width: 500px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .tit_step { font-size: 5.3vw; margin-bottom: 4.5vw!important; } .tit_step span { font-size: 5vw; margin-bottom: 2vw; } .bg_blue { padding: 12vw 4vw; } .img_flow { margin-bottom: 4vw!important; } } /* ================================================================================ 04TRAINER ================================================================================ */ .trainer_name { text-align: center; line-height: 1.4; } .trainer_name span { display: block; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .trainer_name { margin-top: 20px; } .trainer_name span { font-size: 24px; margin-left: 10px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .img_trainer img { width: 80%; } .trainer_name { margin-top: 4vw; } .trainer_name span { font-size: 4.8vw; margin-left: 2vw; } } /* ================================================================================ 06ACCESS ================================================================================ */ .gmap iframe { width: 100%; } .parking_box { background: #FFF; font-size: 110%; } .contact_box { color: #FFF; background: #3A58B2; text-align: center; } .contact_box em { font-style: normal; } .contact_box span { font-family: paralucent, 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; line-height: 1.4; } .contact_box a { color: #FFF; } .col_linebox { text-align: center; } .col_linebox h4 { background: #6982CF; color: #FFF; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .gmap iframe { height: 400px; } .map_box a { width: 100%; height: 400px; display: block; z-index: 1; position: absolute; } .parking_box { padding: 20px; max-width: 750px; margin: 0 auto; } .contact_box { padding: 20px; font-size: 18px; } .contact_box em { font-size: 20px; } .contact_box span { font-size: 45px; } .col_linebox { border: solid 4px #6982CF; padding: 25px; } .col_linebox h4 { font-size: 18px; padding: 3px 0; margin-bottom: 15px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .gmap iframe { height: 250px; } .map_box a { width: 100%; height: 250px; display: block; z-index: 1; position: absolute; } .parking_box { padding: 4vw; } .contact_box { padding: 4vw; font-size: 4.2vw; } .contact_box em { font-size: 4.4vw; } .contact_box span { font-size: 6.2vw; } .col_linebox { border: solid 2px #6982CF; padding: 4vw; margin-bottom: 4vw; } .col_linebox h4 { font-size: 4.2vw; padding: 1vw 0; margin-bottom: 2vw; } .elementor-row .col_linebox:last-child { margin-bottom: 0; } } /* ================================================================================ 〇〇ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { }