@charset "UTF-8"; /* 幅1100px以下からcss適応 */ @media only screen and (max-width: 1100px) { html, body, main { overflow-x: hidden; } /* ヘッダー */ #header { padding: 8px 0 24px; } .h_contact { align-items: flex-start; } .h_logo { margin-right: 16px; } .h_conts { margin-top: 12px; align-items: flex-start; } .h_contact-btnconts { display: none; } #nav { padding: 0; margin-bottom: 0; } .nav_pc { display: none; } .nav_sp { display: flex; justify-content: space-between; background: #f5f7eb; } .nav_sp-conts { width: calc(100% / 3); text-align: center; border-right: 1px solid #d2ccbd; display: flex; justify-content: center; align-items: center; padding: 12px 0; } .nav_sp-conts:last-of-type { border-right: none; } /* ハンバーガーメニュー */ .sp_hummenu { position: relative; top: 0; left: 0; right: 0; height: 100%; } .hum_menu_obtn { background: none; padding: 0; border: none; width: 100%; color: #fff; font-weight: bold; letter-spacing: 0.05em; display: block; position: relative; top: 0; left: 0; right: 0; margin: 0 auto; } .hum_menu_obtn p { line-height: 0; } .hum_menu_obtn_bar { position: relative; width: 100%; border-top: 3px solid #fff; padding: 5px 0px 0; } .hum_menu_obtn_bar:before, .hum_menu_obtn_bar:after { content: ""; display: block; border-top: 3px solid #fff; padding: 5px 0 0; } .hum_menu_obtn span { position: relative; width: 100%; display: block; top: 0; line-height: 1; color: #fff; } .hum_menu_nav { background: rgba(253, 253, 253, 0.98); height: 100%; left: 100%; position: fixed; top: 0; transition-duration: 0.3s; transition-property: left; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); width: 100%; color: #000; } .hum_menu_contact { color: #fff; display: block; margin: 50px 20px 20px; } .hum_menu_contact a { margin: 0 auto; font-weight: bold; border-radius: 4px; text-decoration: none; font-size: 0.85em; padding: 2px 0; display: block; width: 100%; max-width: 200px; } .hum_menu_contact a.h_menu_contact { display: flex; justify-content: center; align-items: center; background: #d57580; color: #fff; padding: 5px 12px; } .hum_menu_contact img { margin-right: 10px; } .hum_menu_contact a { text-decoration: none; } .hum_menu_contact a.h_menu_taiken { display: flex; justify-content: center; align-items: center; background: #64bebf; color: #fff; padding: 5px 12px; margin-top: 8px; } .hum_menu_contact img { margin-right: 10px; } .hum_menu_nav.clicked { left: 0; overflow: scroll; z-index: 100000; } .hum_menu_nav_close { padding: 15px 0; } .hum_menu_cbtn { background: rgba(64, 166, 41, 0); border: none; color: #000; padding: 0; font-weight: bold; letter-spacing: 0.05em; display: block; position: absolute; top: 25px; left: 17px; } .hum_menu_cbtn_bar { position: relative; top: 0; width: 100%; padding: 5px 0 0; } .hum_menu_cbtn_bar:before, .hum_menu_cbtn_bar:after { content: ""; display: block; border-top: 3px solid #000; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 3px; } .hum_menu_cbtn_bar:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-top: -3px; margin-bottom: 15px; } .hum_menu_nav_menu { margin-top: 55px; } .hum_menu_nav_menu-list { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; border-top: 1px solid #000; } .hum_menu_nav_menu-list li { color: #000; width: 100%; text-align: center; border-bottom: 1px solid #000; line-height: 1.5; font-size: 0.85em; font-weight: bold; position: relative; text-align: center; } .hum_menu_nav_menu-list li:nth-child(2n+1) { width: 100%; border-bottom: 1px solid #000; } .hum_menu_nav_menu-list li a { padding: 16px 0; display: block; color: #333; text-decoration: none; } .hum_menu_nav_menu-list li a:after { content: ""; position: absolute; right: 15px; width: 8px; height: 8px; margin-top: 3px; border-top: 2px solid #000; border-right: 2px solid #000; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: transform 0.3s linear 0s; transition: transform 0.3s linear 0s; } .hum_menu_nav_menu-list li a.more_on:after { -webkit-transform: rotate(135deg); transform: rotate(135deg); } .hum_menu_nav_menu-list li.sp_nav_more_wrap a { padding: 16px 0; } .hum_menu_nav_menu-list ul.sp_nav_more { border-top: none; } .hum_menu_nav_menu-list ul.sp_nav_more li { text-align: right; padding: 10px 15px 0; font-size: 1.05em; border-bottom: none; background: rgba(0, 0, 0, 0.05); box-sizing: border-box; } .hum_menu_nav_menu-list ul.sp_nav_more li:last-child { border-bottom: none; padding-bottom: 10px; } .hum_menu_nav_menu-list ul.sp_nav_more li:after { content: none; } .hum_menu_nav_menu-list ul.sp_nav_more li a { padding: 5px 0; text-align: center; } .hum_menu_nav_menu-list ul.sp_nav_more li a:after { content: none; } .hum_menu_nav-ttl01 { background: #81b802; box-sizing: border-box; padding: 16px 4px; font-size: 1.2em; font-weight: bold; color: #fff; text-align: left; } .sp_nav_more_o { display: none; width: calc(200% + 2px); } .sp_nav_more_r { position: relative; left: -100%; width: 200%; } .hum_open_bg_display { transition: all 0.25s linear 0s; } .hum_open_bg_display.active { background: rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999; } /* ここまで */ .hum_menu_obtn, .sp_tel, .sp_contact { min-height: 64px; } .hum_menu_obtn img, .sp_tel img, .sp_contact img { width: auto; max-width: 100%; height: auto; max-height: 64px; } .sp_tel p, .sp_contact p { line-height: 0; } .hum_menu_obtn p, .sp_tel a, .sp_contact a { display: flex; justify-content: center; align-items: center; box-sizing: border-box; transition: all 0.25s linear 0s; } .hum_menu_obtn p img, .sp_tel a img, .sp_contact a img { width: auto; max-width: 100%; height: auto; } .nav_side #side { display: block; margin: 24px auto 0; padding-bottom: 0; } #nav_side-btn { display: block; box-shadow: none; border: none; background: linear-gradient(to bottom, #ff984f 0%, #f36b09 100%); color: #fff; padding: 8px 40px 8px 60px; box-sizing: border-box; border-radius: 100px; font-size: 1em; font-weight: bold; margin: 16px auto 32px; position: relative; } #nav_side-btn:before { content: ""; width: 3px; height: 10px; background: #fff; position: absolute; left: 41px; bottom: 15px; transform: rotate(-45deg); } #nav_side-btn:after { content: ""; width: 3px; height: 10px; background: #fff; position: absolute; left: 47px; bottom: 15px; transform: rotate(45deg); } #nav_side-btn.on:before { transform: rotate(-315deg); } #nav_side-btn.on:after { transform: rotate(315deg); } #nav.on { position: fixed; top: 0; left: 0; z-index: 990; width: 100%; } #nav.on .hum_menu_obtn p, #nav.on .sp_tel a, #nav.on .sp_contact a { max-height: 70px; } #nav.on .hum_menu_obtn p img, #nav.on .sp_tel a img, #nav.on .sp_contact a img { max-height: 50px; } /* mainimage */ #mainimage { padding: 12px 0; } /* common */ #main { max-width: 800px; flex-direction: column; } #conts { width: 100%; max-width: 720px; margin: 0 auto; } .offer_btn { width: 80%; } /* top */ .maincampaign { width: 95%; } .nayami_conts-text { width: 98.5%; padding: 0 23px 20px; box-sizing: border-box; } /* side */ #side { display: none; } /* footer */ .footer_wrap { width: 90%; flex-direction: column; } .footer_l { text-align: center; justify-content: center; margin-bottom: 20px; } .f_link { display: flex; justify-content: center; } .footer_r { width: auto; max-width: 100%; margin: 0 auto; } .f_address { text-align: center; } } /* 幅980px以下からcss適応 */ @media only screen and (max-width: 980px) { #main { margin-bottom: 80px; } /* common_contact */ .common_contactconts { padding: 40px 0; } .common_contact-wrap { flex-direction: column; justify-content: center; } .common_contact-l { margin: 0 auto 24px; } .common_contact-r { display: flex; justify-content: center; flex-direction: column; } .common_contact-r-tel { text-align: center; } .common_contact-r-tel img { width: auto; max-width: 100%; height: auto; } .common_contact-r-info { justify-content: center; } .nayami_menulist-list { width: 100%; margin: 0 auto; } .nayami_menulist-list ul li img { width: auto; max-width: 100%; height: auto; } } /* 幅800px以下からcss適応 */ @media only screen and (max-width: 800px) { .conts_contact { padding: 32px 16px; } .sp_tel, .sp_contact, .hum_menu_obtn { min-height: 48px; } .sp_tel img, .sp_contact img, .hum_menu_obtn img { width: auto; max-width: 100%; height: auto; max-height: 64px; } .hum_menu_obtn { top: 0; } } /* 幅680px以下からcss適応 */ @media only screen and (max-width: 680px) { /* common */ .strong03 { font-size: 1.1em; } /* header */ #header { margin-top: 80px; } .h_wrap { width: 100%; } .h_h1-t { padding: 0 2.5% 4px; border-bottom: 1px dashed #ddd; justify-content: flex-start; } .h_conts { width: 95%; margin: 16px auto 0; } .h_conts { flex-direction: column; } .h_logo { width: 100%; } .h_logo { text-align: center; margin: 0 auto; line-height: 0; } .h_logo img { max-width: 90%; } .h_contact { display: none; } .ttl01 { padding: 8px 8px 8px 28px; font-size: 18px; margin-bottom: 12px; } .ttl02 { font-size: 20px; padding-bottom: 8px; min-height: 0; margin-bottom: 20px; } .ttl03 { margin-bottom: 16px; } .ttl03 .ttl03_wrap { display: inline-block; font-size: 20px; padding: 4px 0; margin-bottom: 0; } .ttl04 { margin-bottom: 16px; } .ttl04 .ttl04_wrap { display: inline-block; font-size: 20px; padding: 4px 4px; margin-bottom: 0; } .ttl05, .conts_single h4{ font-size: 16px; padding: 10px 10px 10px 26px; } .ttl05:before, .conts_single h4:before{ left: 12px; width: 8px; height: 8px; top: 18px; } .ttl06 { font-size: 20px; background-size: 32px auto; min-height: 40px; margin-bottom: 16px; } .ttl07 { font-size: 16px; margin-bottom: 12px; } .ttl08 { font-size: 16px; padding-bottom: 0; margin-bottom: 12px; } .ttl09 { margin-bottom: 6px; } .ttl10 { font-size: 24px; margin-bottom: 16px; } .ttl12 { font-size: 20px; padding-bottom: 8px; min-height: 0; margin-bottom: 12px; } .br { display: inline; } .movie iframe { height: 60vw; min-height: 180px; max-height: 320px; } /* nav */ #nav { display: block; width: 100%; position: fixed; left: 0; top: 0; z-index: 9999; } .hum_menu_obtn, .sp_tel, .sp_contact { min-height: 40px; } .hum_menu_obtn img, .sp_tel img, .sp_contact img { max-height: 54px !important; } .nav_sp { border-bottom: 1px solid #d2ccbd; } /* mainimage */ #mainimage { padding: 0; } .mainimage_pc { display: none; } .mainimage_sp { display: block; line-height: 0; } .mainimage_sp img { width: auto; max-width: 100%; height: auto; } /* main */ #conts { width: 95%; margin: 0 auto; } #main { margin: 24px auto; } .conts01 { margin-top: 32px; } .top_course_list { flex-direction: column; text-align: center; } .top_course_list li { width: 100%; margin-right: 0; } /* メディア */ .media_conts { padding: 12px; } .profile_media-conts{ width: calc(50% - 6px); margin-right: 12px; } /* ごあいさつ */ .message_ttl { min-height: 140px; padding: 16px; font-size: 18px; text-align: center; } .message_conts { padding: 12px; } .message_conts p { font-size: 15px; } .first_img{ margin-bottom: 8px; } .first_img ul li{ width: calc(50% - 4px); margin-right: 8px; margin-bottom: 8px; } .first_img ul li:nth-of-type(2n){ margin-right: 0; } /* 受講生の声 */ .voice_conts { margin-top: 24px; } .voice_info { flex-direction: column; } .voice_info-img { width: 180px; margin: 0 auto 4px; } .voice_info-text { width: 100%; margin: 20px auto 0; box-sizing: border-box; } .voice_info-ttl { font-size: 18px; } .voice_ttl { font-size: 18px; padding: 0px 20px 0px 30px; min-height: 50px; } .voice_ttl:before { width: 70px; height: 70px; } .voice_info-ttl span { font-size: 15px; } .voice_survey { padding: 12px; margin-top: 16px; } .voice_survey:before { content: none; } .voice_survey .ttl span { font-size: 16px; } .voice_linkbtn { margin-top: 16px; } .voice_linkbtn a { padding: 12px; line-height: 1.5; font-size: 15px; } .voice_linkbtn a img { width: 100%; max-width: fit-content; height: 100%; max-height: 20px; } /* common_conts */ .conts_contact { padding: 16px 12px; } .conts_contact-wrap { padding: 35px 30px; } .contact_logo { margin-bottom: 16px; } .contact_btn a { flex-direction: column; justify-content: center; } .contact_btn a img { margin: 0 auto !important; } .contact_btn a img:first-of-type { width: auto; max-width: 120px; height: auto; max-height: 45px; } .contact_btn a img:last-of-type { width: auto; max-width: 100%; height: auto; max-height: 100%; margin-top: 8px !important; } .contact_info { display: flex; flex-direction: column; } .contact_btn { margin-bottom: 16px; } .contact_btn-mail a img:last-of-type { margin-top: 0 !important; } .contact_info-l { text-align: center; margin: 0 auto 16px; } .contact_info-l img { width: auto; max-width: 180px; height: auto; } .contact_info-r { width: 100%; margin: 0 auto; } .contact_info-r p { text-align: left; } .contact_map iframe { min-height: 280px; } /* 学院長の著作 */ .writing_conts { flex-direction: column; } .writing_text { width: 100%; margin-top: 20px; } .writing_img.wide + .writing_text { width: 100%; } .writing_img { text-align: center; } /* 推薦の声 */ .recommend_conts { padding: 12px; } .recommend_info { padding: 16px 8px 16px 64px; } .recommend_info:before { background-size: contain; width: 20vw; height: 24vw; } .recommend_info-text02 { font-size: 15px; } .recommend_ttl01 { font-size: 20px; } .recommend_textarea { padding: 12px; } .recommend_textarea-img { text-align: center; float: none; margin: 0 auto 12px; } /* common_conts */ .common_contact-wrap { width: 90%; } .common_contact-subttl { font-size: 18px; line-height: 1.5; } .common_contact-btnlist { flex-direction: column; } .common_contact-btnconts { width: 100%; margin: 0 auto 16px; text-align: center; } .common_contact-btntel-open { font-size: 14px; margin-bottom: 4px; } .common_contact-btntel { min-height: 40px; } .common_contact-btnreserve a { min-height: 40px; box-sizing: border-box; padding: 8px; } /* ニュース */ .top_newsblog { flex-direction: column; } .top_newsblog-conts { width: 100%; margin: 0 auto 32px; } /* pagetop */ #pagetop img { width: 48px; height: 48px; } .common_contactconts { padding: 24px 0 calc(48px + 2.5%); } /* footer */ #footer { padding: 24px 0; margin-bottom: 8.5vw; } .f_info { flex-direction: column; justify-content: center; margin: 16px auto; padding: 16px 0; } .f_info p { text-align: center; } .f_menu ul li { border-left: none; border-right: 1px solid #433519; margin: 0 0 12px 0; padding-right: 8px; } .f_menu ul li:last-of-type { margin: 0 0 12px 0; border-right: none; } .f_menu ul li a { font-size: 14px; } .tbl_open thead tr th, .tbl_open thead tr td, .tbl_open tbody tr th, .tbl_open tbody tr td, .tbl_open02 thead tr th, .tbl_open02 thead tr td, .tbl_open02 tbody tr th, .tbl_open02 tbody tr td { font-size: 12px; padding: 4px; } .f_copy { margin-top: 16px; } /* 下層ページ */ .list01 { border-width: 6px; padding: 12px; } .list01 li { margin-bottom: 4px; } .list01 li:last-of-type { margin-bottom: 0; } .img_f-r { width: 40%; margin-left: 12px; margin-bottom: 8px; } .strong_text01 strong { font-size: 18px; } .strong_text01 { font-size: 16px; text-align: left; } .strong_text01 br { display: none; } .strong_text02 { font-size: 16px; } #breadcrumb { display: none; } #second main { margin-top: 30px; } #second_mainimage { height: 10vw; min-height: 130px; } .second_mainimage-maintext { font-size: 32px; } .second_mainimage-subtext { font-size: 20px; } .secondconts02 { margin-top: 16px; } .img_list ul{ flex-direction: column; } .img_list ul li, .img_list ul li:nth-of-type(2n){ text-align: center; margin: 0 auto 4px; } .img_list ul li:last-of-type{ margin: 0 auto; } .about_list01 { flex-direction: column; padding: 16px; margin: 1em auto; } .about_list01-img { text-align: center; margin: 0 auto 16px; } .about_list01-img img { width: auto; max-width: 90%; height: auto; } .about_selecttext01 p { font-size: 16px; text-align: left; line-height: 1.75; } .about_selectimg01 { margin: 1em auto; } .about_checklist-ttl01 { font-size: 16px; text-align: left; padding: 12px; } .about_checklist-conts { padding: 16px; } .about_checklist-text01 { font-size: 16px; text-align: left; line-height: 1.75; } .about_support-message { min-height: 100px; box-sizing: border-box; padding: 8px 16px 40px; } .about_support-message p { font-size: 16px; text-align: left; } .about_onayami { padding: 16px; } .about_onayami ul li { width: auto; margin: 0 24px 12px 0; padding-left: 24px; background-size: 16px auto; font-size: 15px; } .about_onayami ul li:nth-of-type(3n) { margin-right: 24px; } .about_shopinfo-list ul li { width: calc(50% - 4px); margin-right: 8px; margin-bottom: 8px; } .about_faq dl { margin-top: 24px; } .about_faq dl dt { font-size: 16px; padding: 4px 8px; padding-left: 4em; line-height: 1.75; } .about_faq dl dt span { width: 3em; } .about_message { padding: 16px; } .about_message .about_message-wrap { flex-direction: column; } .about_messge-img { width: auto; margin: 0 auto 8px; } .about_messge-img img { width: auto; max-width: 90%; height: auto; } .about_message-text { width: 100%; } .course_list { width: 100%; } .course_list li { width: calc(100% / 2 - 6px); } .course_list li:nth-of-type(2n) { margin-right: 0; } .tbl01 tbody tr th, .tbl01 tbody tr td { padding: 8px; } .price_telconts .price_telnum { font-size: 1.2em; } .staff_info { flex-direction: column; } .staff_info-img { text-align: center; margin: 0 auto 16px; } .staff_list { padding: 16px; } .staff_list ul li { width: calc(50% - 8px); max-width: 100%; margin-right: 16px; margin-bottom: 16px; } .staff_list ul li:nth-of-type(3n) { margin-right: 16px; } .staff_list ul li:nth-of-type(2n) { margin-right: 0; } .staff_message-wrap { flex-direction: column; } .staff_message-img { width: auto; margin: 0 auto 16px; text-align: center; } .staff_message-img img { width: auto; max-width: 90%; height: auto; } .staff_message-text { width: 100%; margin: 0 auto; } .staff_conts-license { margin-top: 16px; } .voice_tablist ul { display: flex; flex-wrap: wrap; } .voice_tablist ul li { width: calc(100% / 3 - 2px); margin-right: 2px; margin-bottom: 4px; } .voice_tablist ul li:nth-of-type(3n) { margin-right: 0; } .voice_tablist ul li a { border-radius: 0; } .voice_imglist ul { flex-direction: column; } .voice_imglist ul li { text-align: center; } .voice_survey .ttl br { display: none; } .access_conts { margin-bottom: 24px; } .access_info { padding: 24px 12px 12px; } .access_info-ttl { margin-bottom: 24px; } .access_info-text dl { flex-direction: column; margin-bottom: 8px; } .access_info-text dl:last-of-type { margin-bottom: 0; } .access_info-text dl dt, .access_info-text dl dd { width: 100%; } .access_info-map iframe { min-height: 280px; } .access_rootconts-wrap { flex-direction: column; } .access_rootconts { width: 100%; margin: 0 auto 16px; padding: 12px; } .access_rootconts:last-of-type { margin-bottom: 0; } .access_root-ttl { font-size: 16px; padding-left: 48px; min-height: 40px; margin-bottom: 12px; } .access_root-ttl:before { width: 40px; height: 40px; font-size: 18px; } .access_rootimg { text-align: center; } .sitemap_list a { font-size: 15px; } .contact_mail-text { padding: 16px; } .contact_telnum { font-size: 18px; margin-bottom: 8px !important; } .contact_form-tbl tbody tr { flex-direction: column; } .contact_form-tbl tbody tr th, .contact_form-tbl tbody tr td { width: 100%; box-sizing: border-box; padding: 8px 12px; } .contact_form-tbl tbody tr th { border-right: none; } .contact_form-tbl tbody tr td p { margin-bottom: 8px !important; } .conts_single h5{ font-size: 16px; line-height: 1.75; } .ear_healing_seminar-conts{ margin-top: 16px; } }