★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ レイアウト ================================================================================ */ /* 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: 120px 0; margin: 0 auto; background: url(../img/cate_bg.jpg) center top / auto auto repeat-y; } .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: 28vw 0 16vw; background: url(../img/cate_bg.jpg) center top / contain repeat-y; } .inner_wrap { position: relative; width: 100%; padding: 0 4vw; } } /* ================================================================================ メイン画像 ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .main_cate { position: relative; background: url(../img/cate_main.jpg) center top / cover no-repeat; height: 45.052vw; } .main_cate_in { position: relative; text-align: center; padding: 26.5vw 0 0; font-size: 2.8vw; font-weight: 900; color: #007eff; } /* メイン画像のタイトル */ .main_cate_in p { } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .main_cate { position: relative; background: url(../img/cate_main_sp.jpg) center top / cover no-repeat; height: 78vw; } .main_cate_in { position: relative; text-align: center; padding: 49.5vw 0 0; font-size: 4.5vw; font-weight: 700; color: #007eff; } /* メイン画像のタイトル */ .main_cate_in p { } } /* ================================================================================ セクション ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* 2カラム ----------------------------------------------- */ .col2_1, .col2_1_long, .col2_1_middle, .col2_1_short, .col2_1_vshort, .col2_1_mshort { margin-right: 20px; } .col2_2, .col2_2_long, .col2_2_middle, .col2_2_short, .col2_2_vshort, .col2_2_mshort { margin-left: 20px; } /* 3カラム ----------------------------------------------- */ .col3_1 { margin-right: 20px; } .col3_2 { margin-left: 10px; margin-right: 10px; } .col3_3 { margin-left: 20px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* 2カラム ----------------------------------------------- */ .col2_1 { } .col2_1_long { margin-top: 16vw; } .col2_1_middle { margin-top: 12vw; } .col2_1_short { margin-top: 8vw; } .col2_1_vshort { margin-top: 4vw; } .col2_1_mshort { margin-top: 3vw; } .col2_2 { } .col2_2_long { margin-top: 16vw; } .col2_2_middle { margin-top: 12vw; } .col2_2_short { margin-top: 8vw; } .col2_2_vshort { margin-top: 4vw; } .col2_2_mshort { margin-top: 3vw; } /* 3カラム ----------------------------------------------- */ .col3_1 { margin-top: 0; } .col3_2, .col3_3 { margin-top: 12vw; } } /* ================================================================================ マージンボックス ================================================================================ */ /* 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; } .top_mshort { margin-top: 10px; } /* 下にマージンを空ける ----------------------------------------------- */ .bottom_long { margin-bottom: 120px; } .bottom_middle { margin-bottom: 80px; } .bottom_short { margin-bottom: 40px; } .bottom_vshort { margin-bottom: 20px; } .bottom_mshort { margin-bottom: 10px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* 上にマージンを空ける ----------------------------------------------- */ .top_long { margin-top: 16vw; } .top_middle { margin-top: 12vw; } .top_short { margin-top: 4vw; } .top_vshort { margin-top: 4vw; } .top_mshort { margin-top: 3vw; } /* 下にマージンを空ける ----------------------------------------------- */ .bottom_long { margin-bottom: 16vw; } .bottom_middle { margin-bottom: 12vw; } .bottom_short { margin-bottom: 8vw; } .bottom_vshort { margin-bottom: 4vw; } .bottom_mshort { margin-bottom: 3vw; } } /* ================================================================================ パディングボックス ================================================================================ */ /* 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_top_mshort { padding-top: 10px; } /* 下にパディングを空ける ----------------------------------------------- */ .p_bottom_long { padding-bottom: 120px; } .p_bottom_middle { padding-bottom: 80px; } .p_bottom_short { padding-bottom: 40px; } .p_bottom_vshort { padding-bottom: 20px; } .p_bottom_mshort { padding-bottom: 10px; } /* 両方にパディングを空ける ----------------------------------------------- */ .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; } .row_mshort { padding-top: 10px; padding-bottom: 10px; } } /* 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_top_mshort { padding-top: 3vw; } /* 下にパディングを空ける ----------------------------------------------- */ .p_bottom_long { padding-bottom: 16vw; } .p_bottom_middle { padding-bottom: 12vw; } .p_bottom_short { padding-bottom: 8vw; } .p_bottom_vshort { padding-bottom: 4vw; } .p_bottom_mshort { padding-bottom: 3vw; } /* 両方にパディングを空ける ----------------------------------------------- */ .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_mshort { padding-top: 3vw; padding-bottom: 3vw; } /* 背景色を伸ばす ----------------------------------------------- */ .row_sp { padding-left: 4vw !important; padding-right: 4vw !important; } } /* ================================================================================ カラーボックス ================================================================================ */ /* カラー01 */ .row_c01 { color: inherit; } /* カラー02 */ .row_c02 { color: inherit; } /* カラー03 */ .row_c03 { color: inherit; } /* ボーダー囲い色1 */ .box_border { } /* ボーダー囲い色2 */ .box_border2 { background: #ffffff; } .box_border_p{ background: #f9e6fc; border-width: 1px; border-style: solid; border-color: #d800ff; } .box_border_b{ background: #cce5ff; border-width: 1px; border-style: solid; border-color: #78bbff; } .box_border_new { background: #fbecf3; border-width: 1px; border-style: solid; border-color: #FF97C2; } .box_border_price { background: #FFFFFF; border-width: 10px; border-style: solid; border-color: #FF97C2; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* カラー01 */ .row_c01 { background: url(../img/message_row_bg.jpg) center bottom / cover no-repeat; } .row_c01 p, .row_c01.elementor-toggle-item { text-shadow: 0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff; } /* カラー02 */ .row_c02 { background: url(../img/experience_row_bg.jpg) center top / auto auto no-repeat; } .row_c02 p, .row_c02 .elementor-toggle-item { text-shadow: 0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff; } /* カラー03 */ .row_c03 { background: url(../img/contact_row_bg.jpg) center top / cover no-repeat; } .row_c03 p, .row_c03 .elementor-toggle-item { text-shadow: 0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff; } /* ボーダー囲い */ .box_border { background: url(../img/contact_row_in_bg.png) center top / contain no-repeat; height: 650px; text-align: center; } .box_border_in { height: 650px; } /* ボーダー囲い2 */ .box_border2 { border-radius: 12px; padding: 40px; } .box_border_p { border-radius: 12px; padding: 40px; } .box_border_b { border-radius: 12px; padding: 40px; } .box_border_new { border-radius: 12px; padding: 40px; } .box_border_price { padding: 40px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* カラー01 */ .row_c01 { background: url(../img/message_row_bg.jpg) center bottom / cover no-repeat; background-color: #effafc; padding-left: 4vw; padding-right: 4vw; } .row_c01 p , .row_c01 .elementor-toggle-item{ text-shadow: 0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff; } /* カラー02 */ .row_c02 { background: url(../img/experience_row_bg.jpg) center top / cover no-repeat; background-color: #f8e6e4; padding-left: 4vw; padding-right: 4vw; } .row_c02 p, .row_c02 .elementor-toggle-item { text-shadow: 0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff; } /* カラー03 */ .row_c03 { background: url(../img/contact_row_bg.jpg) center top / cover no-repeat; padding-left: 4vw; padding-right: 4vw; } .row_c03 p, .row_c03 .elementor-toggle-item { text-shadow: 0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff; } /* ボーダー囲い */ .box_border { background-color: #ffffff; border-left: 1px solid #007eff; border-right: 1px solid #007eff; text-align: center; margin: 23vw 6vw !important; padding: 0 6vw; } /* ボーダー囲い2 */ .box_border2 { padding: 6vw; border-radius: 2vw; } .box_border_p { padding: 6vw; border-radius: 2vw; } .box_border_b { padding: 6vw; border-radius: 2vw; } .box_border_new { padding: 6vw; border-radius: 2vw; } .box_border_price { padding: 6vw; } } /* ================================================================================ 見出し ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* h2 見出し ----------------------------------------------- */ .h2_cate { border-radius: 12px; padding: 30px 50px; } .h2_cate:before { position: absolute; content: ''; background: url(../img/h3_kira.png) center top / contain no-repeat; width: 42px; height: 46.65px; bottom: 6px; left: 9px; } .h2_cate:after { position: absolute; content: ''; background: url(../img/h3_kira.png) center top / contain no-repeat; width: 42px; height: 46.65px; bottom: 6px; right: 9px; transform: scale(-1,-1); } .h2_cate h2 { position: relative; text-align: center; color: #ffffff; font-weight: 900; font-size: 32px; line-height: 1.4; } /* h3 見出し */ .h3_cate { padding: 20px 0; border-radius: 12px; } .h3_cate h3 { font-size: 26px; color: #ffffff; font-weight: 900; text-align: center; line-height: 1.4; } /* 見出しカラー */ .title_pink { background-color: #fb4ba4; } .title_blue { background-color: #007eff; } .title_purp { background-color: #d800ff; } /* ボーダー背景 ----------------------------------------------- */ .h2_cate04 { } .h2_cate04 h2 { color: #fb4ba4; font-size: 33px; line-height: 1.5 !important; text-align: center; } .h3_cate04 { text-align: center; } .h3_cate04 h3 { color: #bf9256; font-size: 28px; font-weight: 500; line-height: 1.4 !important; } /* 3カラムh3見出し ----------------------------------------------- */ .h3_col3 { border-bottom: 1px dotted; padding: 0 0 8px 0 !important; } .h3_col3 h3 { font-size: 20px; font-weight: 900; line-height: 1.4 !important; color: #fb4ba4; text-shadow: 0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff; } .row_c01 .h3_col3 h3 { color: #fb4ba4; } .row_c02 .h3_col3 h3 { color: #fb4ba4; } /* 流れ ----------------------------------------------- */ .flow_box { } .flow_box01, .flow_box03, .flow_box05 { width: 30% !important; } .flow_box02, .flow_box04 { width: 5% !important; } .h3_flow { background: url(../img/special_session_bg.jpg) center bottom / cover no-repeat; height: 170px; text-align: center; display: flex; justify-content: center; align-items: center; border-radius: 12px; } .h3_flow h3 { font-size: 25px; font-weight: 900; line-height: 1.7 !important; color: #fff; padding-bottom: 0.4em; } /* 矢印 */ .icon_arrow .elementor-icon { color: #007eff; font-size: 30px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* h2 見出し ----------------------------------------------- */ .h2_cate { border-radius: 1vw; padding: 3.6vw 4vw 4vw; } .h2_cate:before { position: absolute; content: ''; background: url(../img/h3_kira.png) center top / contain no-repeat; width: 5vw; height: 5.5vw; bottom: 1vw; left: 1vw; } .h2_cate:after { position: absolute; content: ''; background: url(../img/h3_kira.png) center top / contain no-repeat; width: 5vw; height: 5vw; top: 1vw; right: 1vw; transform: scale(-1,-1); } .h2_cate h2 { position: relative; text-align: center; color: #ffffff; font-weight: 900; font-size: 5vw; line-height: 1.4; } /* h3 見出し */ .h3_cate { padding: 3vw 4vw; border-radius: 1vw; } .h3_cate h3 { font-size: 4.5vw; color: #ffffff; font-weight: 900; text-align: center; line-height: 1.6; } /* 見出しカラー */ .title_pink { background-color: #fb4ba4; } .title_blue { background-color: #007eff; } .title_purp { background-color: #d800ff; } /* ボーダー背景 ----------------------------------------------- */ .h2_cate04 { } .h2_cate04 h2 { color: #fb4ba4; font-size: 6vw; text-align: center; line-height: 1.5 !important; } .h3_cate04 { text-align: center; } .h3_cate04 h3 { color: #bf9256; font-size: 4.5vw; font-weight: 500; line-height: 1.4 !important; } /* 3カラムh3見出し ----------------------------------------------- */ .h3_col3 { border-bottom: 1px dotted; padding: 0 0 2vw 0 !important; } .h3_col3 h3 { font-size: 4.5vw; font-weight: 700; line-height: 1.4 !important; color: #fb4ba4; text-shadow: 0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff; } .row_c01 .h3_col3 h3 { color: #fb4ba4; } .row_c02 .h3_col3 h3 { color: #fb4ba4; } /* 流れ ----------------------------------------------- */ .flow_box { } .flow_box01, .flow_box03, .flow_box05 { margin-top: 3vw; } .flow_box02, .flow_box04 { margin-top: 3vw; } .h3_flow { background: url(../img/special_session_bg.jpg) left bottom / cover no-repeat; height: 32vw; text-align: center; display: flex; justify-content: center; align-items: center; border-radius: 2vw; } .h3_flow h3 { font-size: 5vw; font-weight: 900; line-height: 1.7 !important; color: #ffffff; padding-bottom: 0.4em; } /* 矢印 */ .icon_arrow .elementor-icon { color: #007eff; font-size: 6vw; } } /* ================================================================================ 共通ボタン ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* ボタン ----------------------------------------------- */ .link_common { } .link_common ul { font-size: 0; letter-spacing: -0.4em; text-align: center; } .link_common ul li { display: inline-block; letter-spacing: 0; } .link_common ul li:not(:first-child) { margin-left: 30px; } .link_common ul li a { color: #ffffff; font-size: 22px; text-align: center; position: relative; display: block; padding: 15px 30px 15px 15px; border-radius: 1px; font-weight: 900; width: 400px; } .link_common ul li a:after { position: absolute; content: ''; background: url(../img/button_after.png) center top / contain no-repeat; width: 11.5px; height: 13px; right: 18px; top: 50%; margin-top: -6.5px; } /* ボタンカラー ----------------------------------------------- */ .pink_btn ul li a { background-color: #fb4ba4; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3.5px #fb4ba4; } .blue_btn ul li a { background-color: #007eff; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3.5px #007eff; } .purp_btn ul li a { background-color: #d800ff; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3.5px #d800ff; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* ボタン ----------------------------------------------- */ .link_common { } .link_common ul { letter-spacing: -0.4em; text-align: center; } .link_common ul li { letter-spacing: 0; } .link_common ul li:not(:first-child) { margin-top: 4vw; } .link_common ul li a { color: #ffffff; text-align: center; position: relative; display: block; border-radius: 1px; font-weight: 900; font-size: 4vw; padding: 3.5vw; width: 86vw; margin-left: auto; margin-right: auto; } .link_common ul li a:after { position: absolute; content: ''; background: url(../img/button_after.png) center top / contain no-repeat; width: 2vw; height: 2vw; right: 3vw; top: 50%; margin-top: -1vw; } /* ボタンカラー ----------------------------------------------- */ .pink_btn ul li a { background-color: #fb4ba4; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3.5px #fb4ba4; } .blue_btn ul li a { background-color: #007eff; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3.5px #007eff; } .purp_btn ul li a { background-color: #d800ff; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3.5px #d800ff; } } /* ================================================================================ 湘南心の森について ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .use_row_box:after { content: ''; position: absolute; background: url(../img/use_flower.png) center top / contain no-repeat; width: 160px; height: 195px; bottom: -56px; right: -95px; } .use_row_box ul.use_row_in { text-align: center; font-size: 0; } .use_row_box ul li.use_box_in { font-size: 18px; display: inline-block; text-align: left; width: 293px; } .use_row_box ul li.use_box_in:nth-of-type(2) { margin: 0 20px; } .use_row_box ul li ul li { margin-top: 14px; line-height: 1.6; text-indent: -1em; padding-left: 1em; } .use_row_box ul li ul li:first-of-type { margin-top: 0; } .more_box { background-color: #ffffff; padding: 20px; border-radius: 12px; } .more_box2 { background-color: #f9e6fc; padding: 20px; border-radius: 12px; } .more_row .use_row_box:after { display: none; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .use_row_box:after { content: ''; position: absolute; background: url(../img/use_flower.png) center top / contain no-repeat; width: 22vw; height: 25vw; bottom: -5.5vw; right: -3vw; } .use_row_box ul li.use_box_in { font-weight: 700; } .use_row_box ul li.use_box_in:nth-of-type(2) { margin: 0.8vw 0; } .use_row_box ul li ul li { margin-top: 0.8vw; line-height: 1.6; text-indent: -1em; padding-left: 1em; } .use_row_box ul li ul li:first-of-type { margin-top: 0; } .more_box { background-color: #ffffff; padding: 2vw 3.3vw; border-radius: 2vw; } .more_row .use_row_box:after { display: none; } } /* ================================================================================ その他共通 ================================================================================ */ .blue_t { color: #007eff; } .purp_t { color: #d95bf0; } .pink_t { color: #fb4ba4; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .c_text { text-align: center !important; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { } /* ================================================================================ お問い合わせ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .contact_row { background: url(../img/contact_row_bg.jpg) center top / cover no-repeat; } /* コンテンツ内容 ----------------------------------------------- */ .contact_row_in { position: relative; background: url(../img/contact_row_in_bg.png) center top / contain no-repeat; text-align: center; height: 727px; } .contact_row_in:after { content: ''; position: absolute; background: url(../img/contact_dolphin.png) center top / contain no-repeat; width: 280px; height: 318px; right: -50px; bottom: 30px; } /* h2 見出し */ .contact_row_title { margin-top: 75px; } .contact_row_title h2 { color: #fb4ba4; font-size: 28px; font-weight: 900; line-height: 1.6; } .contact_row_title h2 span { font-size: 20px; display: block; } /* 文章 */ .contact_row_text01 { color: #007eff; margin-top: 8px; font-size: 17px; } .contact_row_text02 { font-size: 18px; line-height: 1.85; margin-top: 10px; } .contact_row_text03 { font-size: 14px; margin-top: 5px; position: relative; } /* 電話番号 */ .contact_row_tel a { position: relative; color: #007eff; display: inline-block; pointer-events: none; font-size: 56px; padding-left: 58px; margin: -7px 0 0 -11px; } .contact_row_tel a span { display: block; font-size: 16px; margin: -13px 0 0 -33px; } .contact_row_tel a:before { content: 'tel:'; position: absolute; color: #007eff; left: 0; font-size: 34px; bottom: 24px; } /* お問い合わせボタン */ .contact_row_btn_box { margin-top: 30px; } .contact_row_btn { width: 500px; margin: 0 auto; position: relative; } .contact_row_btn ul { text-align: center; } .contact_row_btn ul li { font-size: 20px; letter-spacing: 0; } .contact_row_btn ul li:not(:first-child) { margin-top: 20px; } .contact_row_btn ul li a { position: relative; display: block; color: #ffffff; letter-spacing: 0.05em; text-indent: 0.05em; line-height: 1.3; padding: 20px 60px 20px 90px; font-weight: 900; border-radius: 5px; } /* LINEお問い合わせ */ .contact_row_btn ul li:first-of-type a { background-color: #3fd172; } .contact_row_btn ul li.line_contact a:before { content: ''; position: absolute; background: url(../img/h_line.png) center top / contain no-repeat; width: 35px; height: 35px; top: 50%; left: 40px; margin-top: -15.5px; } /* メールお問い合わせ */ .contact_row_btn ul li:last-of-type a { background-color: #3e9af7; } .contact_row_btn ul li.mail_contact a:before { content: ''; position: absolute; background: url(../img/h_mail.png) center top / contain no-repeat; width: 33px; height: 25px; top: 50%; left: 42px; margin-top: -12.5px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .contact_row { background: url(../img/contact_row_bg.jpg) center top / cover no-repeat; padding: 16vw 4vw; } /* コンテンツ内容 ----------------------------------------------- */ .contact_row_in { position: relative; background-color: #ffffff; border: 2px solid #fb4ba4; text-align: center; border-radius: 1vw; padding: 6vw 4vw; } .contact_row_in:after { content: ''; position: absolute; background: url(../img/contact_dolphin.png) center top / contain no-repeat; width: 28vw; height: 32vw; right: -7vw; bottom: -28vw; } /* h2 見出し */ .contact_row_title { } .contact_row_title h2 { color: #fb4cb5; font-size: 4.5vw; font-weight: 900; line-height: 1.6; } .contact_row_title h2 span { display: block; } /* 文章 */ .contact_row_text01 { color: #007eff; font-weight: 700; margin-top: 2vw; font-size: 4vw; } .contact_row_text02 { font-weight: 700; line-height: 1.85; margin-top: 1.28vw; } .contact_row_text03 { font-weight: 700; position: relative; font-size: 3.2vw; } /* 電話番号 */ .contact_row_tel { margin: 2vw 0; } .contact_row_tel a { position: relative; color: #007eff; font-weight: 700; font-size: 8vw; padding-left: 1vw; display: inline-block; margin: -0.5vw 0 0 6vw; pointer-events: none; } .contact_row_tel a span { display: block; font-weight: 700; font-size: 3.6vw; margin: -1vw 0 0 -7vw; } .contact_row_tel a:before { content: 'tel:'; position: absolute; color: #007eff; font-weight: 700; font-size: 5vw; bottom: 6.6vw; left: -6vw; } /* お問い合わせボタン */ .contact_row_btn_box { margin-top: 6vw; } .contact_row_btn { width: 75vw; margin: 0 auto; position: relative; } .contact_row_btn ul { text-align: center; } .contact_row_btn ul li { font-size: 4vw; letter-spacing: 0; } .contact_row_btn ul li:not(:first-child) { margin-top: 4vw; } .contact_row_btn ul li a { position: relative; display: block; color: #ffffff; letter-spacing: 0.05em; text-indent: 0.05em; line-height: 1.3; padding: 4vw 4vw 4vw 9vw; font-weight: 900; border-radius: 0.5vw; } /* LINEお問い合わせ */ .contact_row_btn ul li:first-of-type a { background-color: #3fd172; } .contact_row_btn ul li.line_contact a:before { content: ''; position: absolute; background: url(../img/h_line.png) center top / contain no-repeat; width: 6vw; height: 6vw; top: 50%; left: 4vw; margin-top: -2.6vw; } /* メールお問い合わせ */ .contact_row_btn ul li:last-of-type a { background-color: #3e9af7; } .contact_row_btn ul li.mail_contact a:before { content: ''; position: absolute; background: url(../img/h_mail.png) center top / contain no-repeat; width: 6vw; height: 5vw; top: 50%; left: 4.25vw; margin-top: -2.3vw; } } /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ここから各固定ページ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ 実績紹介部分 ================================================================================ */ /* カテゴリアイコン色 */ .works_icon span { background-color: #222222; color: #ffffff; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .works_wrap { position: relative; width: 1000px; margin:0 auto; } .works_wrap ul { font-size: 0; text-align: center; } .works_wrap > ul > li { position: relative; display: inline-block; vertical-align: top; text-align: left; width: 320px; margin-left: 20px; font-size: 16px; } .works_wrap > ul > li:nth-of-type(3n+1) { margin-left: 0; } /* カテゴリアイコン */ .works_icon { position: absolute; top: 16px; left: 0px; } .works_icon span, .works_icon a { position: relative; display: inline-block; padding: 0 0.5em 0.1em; } /* サムネイル画像 */ .works_thumb img { width: 100%; height: 213px; object-fit: cover; font-family: 'object-fit: cover;'; /* IE対策 */ } /* 投稿記事見出し */ .works_title a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; padding: 0.3em 0.5em; font-size: 18px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .works_wrap { position: relative; margin: 0 auto; } .works_wrap > ul { } .works_wrap > ul > li { position: relative; padding: 0; } .works_wrap > ul > li:not(:first-child) { margin-top: 6vw; } .works_wrap > ul > li > a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; border: 1px solid #cccccc; } /* カテゴリアイコン */ .works_icon { position: absolute; top: 4vw; left: 0px; } .works_icon span, .works_icon a { display: inline-block; padding: 0 0.5em 0.1em; } /* サムネイル画像 */ .works_thumb img { max-width: 100%; width: 100%; height: 62vw; object-fit: cover; font-family: 'object-fit: cover;'; } /* 投稿記事見出し */ .works_title a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; padding: 0.3em 0.5em; font-size: 4vw; } } /* ================================================================================ ボックス ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .box_title { border-bottom: 1px dotted; padding: 0 0 20px 0 !important; } .box_title h3 { text-align: center; font-size: 28px; font-weight: 700; line-height: 1.4 !important; color: #fb4ba4; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .box_title { border-bottom: 1px dotted; padding: 0 0 4vw 0 !important; } .box_title h3 { font-size: 4.5vw; font-weight: 700; line-height: 1.4 !important; color: #fb4ba4; text-align: center; } } /* ================================================================================ キャンセルボックス ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .cancel_box table { width: 100%; } .cancel_box table tbody tr th { background-color: #007eff; color: #fff; font-weight: 700; width: 30%; padding: 15px; border-bottom: 1px solid; } .cancel_box table tbody tr td { background-color: #F7F3F2; font-weight: 700; width: 70%; padding: 15px; text-align: center; border-bottom: 1px solid #fff; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .cancel_box table { width: 100%; } .cancel_box table tbody tr th { background-color: #007eff; color: #fff; font-weight: 700; width: 30%; padding: 4vw; border-bottom: 1px solid; vertical-align: middle; } .cancel_box table tbody tr td { background-color: #F7F3F2; font-weight: 700; width: 70%; padding: 4vw; text-align: center; border-bottom: 1px solid #fff; } } /* ================================================================================ ボタン一覧 ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .btn_title h3 { font-size: 22px; font-weight: 900; line-height: 1.4 !important; color: #fb4ba4; height: 62px; display: table-cell; vertical-align: middle; width: 313px; } .btn_list ul li a { position: relative; display: table-cell; vertical-align: middle; background-color: #fb4ba4; color: #ffffff; letter-spacing: 0.05em; text-indent: 0.05em; line-height: 1.3; padding: 15px 60px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fb4ba4; border-radius: 1px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .btn_title h3 { font-size: 4.5vw; font-weight: 900; line-height: 1.4 !important; color: #fb4ba4; } .btn_list ul li a { position: relative; text-align: center; display: block; background-color: #fb4ba4; color: #ffffff; letter-spacing: 0.05em; text-indent: 0.05em; line-height: 1.3; padding: 3.5vw; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3.5px #fb4ba4; border-radius: 1px; margin-left: auto; margin-right: auto; } } /* ================================================================================ 認定養成講座メニュー＆料金 ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .kouza_p { padding-top: 140px; margin-top: -100px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .kouza_p { padding-top: 14vw; margin-top: -10vw; } } /* ================================================================================ アクセスページ ================================================================================ */ .map_box a { width: 100%; height: 450px; display: block; position: absolute; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { } /* 勉強会　スケジュール ----------------------------------------------- */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .message_section_02 { background-color: #ffffff; margin-top: 3.7vw; border-radius: 2vw; } .message_section_02:after { content: ''; position: absolute; background: url(../img/contact_dolphin.png) center top / contain no-repeat; width: 22vw; height: 23vw; right: -13vw; bottom: -5vw; } .message_section_text_02 { text-align: left; font-size: 1.40625vw; font-weight: 700; line-height: 1.85; } .message_box { padding: 3.3vw 5vw 3.7vw 33.3vw; } .message_box:before { content: ''; position: absolute; background: url(../img/benkyoukai_img1-2.png) center top / contain no-repeat; width: 25vw; height: 25vw; top: 50%; left: 3.7vw; margin-top: -14vw; } .message_section_01 { background: url(../img/message_row_bg.jpg) center top / cover no-repeat; padding: 7vw 7vw 5vw; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .message_section_02 { background-color: #ffffff; top: 3vw; border-radius: 2vw; } /* 文章 */ .message_section_text_02 { text-align: left; font-weight: 700; line-height: 1.8; margin-left: 3vw; } .message_box { padding: 52vw 0vw 6vw; } .message_box:before { content: ''; position: absolute; background: url(../img/benkyoukai_img2.png) center top / contain no-repeat; width: 50vw; height: 70vw; top: -2vw; bottom: 8vw; left: 50%; margin-left: -24vw; } .message_section_01 { background: url(../img/message_row_bg.jpg) center top / cover no-repeat; padding: 10vw 6vw 10vw; } }