★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ レイアウト ================================================================================ */ /* 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: 80px 0; 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: 12vw 0 0; } .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) { /* カラー01 */ .row_c01 { background: url(../img/spacer.gif) center top / auto auto repeat ,#ffe0ec; } /* カラー02 */ .row_c02 { background: url(../img/spacer.gif) center top / auto auto repeat ,#e0f2f9; } /* ボーダー囲い */ .box_border { padding: 40px; border: 4px solid #FC86B5; } /* 画像のボーダー囲い */ .img_border img { border: 8px solid #cccccc; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* カラー01 */ .row_c01 { background: url(../img/spacer.gif) center top / auto auto repeat ,#ffe0ec; padding-left: 4vw; padding-right: 4vw; } /* カラー02 */ .row_c02 { background: url(../img/spacer.gif) center top / auto auto repeat ,#e0f2f9; padding-left: 4vw; padding-right: 4vw; } /* ボーダー囲い */ .box_border { padding: 4vw; border: 1vw solid #FC86B5; } /* 画像のボーダー囲い */ .img_border img { border: 2vw solid #cccccc; } } /* ================================================================================ メイン画像 ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .main_cate { width: 1113px; height: 575px; margin: 52px auto 0; } .cate01 { background: url(../img/cate_main01.jpg) center top / contain no-repeat; } .cate02 { background: url(../img/cate_main02.jpg) center top / contain no-repeat; } .cate03 { background: url(../img/cate_main03.jpg) center top / contain no-repeat; } .main_cate_in { color: #1297b4; font-weight: 600; font-size: 35px; letter-spacing: 0.09em; padding: 223px 0; text-align: center; text-shadow: 0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .main_cate { width: 100%; height: 93vw; margin: 6vw auto 0; } .cate01 { background: url(../img/cate_main01_sp.jpg) center top / contain no-repeat; } .cate02 { background: url(../img/cate_main02_sp.jpg) center top / contain no-repeat; } .cate03 { background: url(../img/cate_main03_sp.jpg) center top / contain no-repeat; } .main_cate_in { color: #1297b4; font-weight: 600; font-size: 5.5vw; letter-spacing: 0.09em; padding: 36.3vw 0; text-align: center; text-shadow: 0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff; } } /* ================================================================================ 見出し ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* h2見出し ----------------------------------------------- */ .h2_cate { text-align: center; } .h2_cate h2 { position: relative; font-size: 34px; font-weight: 500; color: #1297b4; display: inline-block; letter-spacing: 0.13em; } .h2_cate h2 span { display: block; color: #fc86b5; font-size: 21px; margin-top: 10px; letter-spacing: 0; font-weight: 400; transform: skewX(-11deg); } .h2_cate h2:before { content: ''; position: absolute; background: url(../img/h2_before.png) center top / contain no-repeat; width: 72px; height: 87px; top: -24px; left: -90px; } .h2_cate h2:after { content: ''; position: absolute; background: url(../img/h2_after.png) center top / contain no-repeat; width: 72px; height: 87px; top: -24px; right: -90px; } /* h3見出し ----------------------------------------------- */ .h3_cate { border-bottom: 1px solid #20acca; padding: 0 0 12px 0 !important; margin-bottom: 30px !important; } .h3_cate h3 { position: relative; font-size: 24px; font-weight: 500; letter-spacing: 0.08em; text-align: center; } .h3_cate02 { border-bottom: 1px solid #fc86b5; padding: 0 0 12px 0 !important; margin-bottom: 20px !important; } .h3_cate02 h3 { position: relative; font-size: 24px; font-weight: 500; letter-spacing: 0.08em; text-align: center; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* h2見出し ----------------------------------------------- */ .h2_cate { text-align: center; } .h2_cate h2 { position: relative; font-size: 5vw; font-weight: 500; color: #1297b4; display: inline-block; letter-spacing: 0.13em; } .h2_cate h2 span { display: block; color: #fc86b5; font-size: 3.3vw; margin-top: 10px; letter-spacing: 0; font-weight: 400; transform: skewX(-11deg); } .h2_cate h2:before { content: ''; position: absolute; background: url(../img/h2_before.png) center top / contain no-repeat; width: 11vw; height: 14vw; top: -4vw; left: -13.6vw; } .h2_cate h2:after { content: ''; position: absolute; background: url(../img/h2_after.png) center top / contain no-repeat; width: 11vw; height: 14vw; top: -4vw; right: -13.6vw; } /* h3見出し ----------------------------------------------- */ .h3_cate { border-bottom: 1px solid #20acca; padding: 0 0 3vw 0 !important; margin-bottom: 4vw !important; } .h3_cate h3 { position: relative; font-size: 4vw; font-weight: 500; letter-spacing: 0.08em; text-align: center; } .h3_cate02 { border-bottom: 1px solid #fc86b5; padding: 0 0 3vw 0 !important; margin-bottom: 4vw !important; } .h3_cate02 h3 { position: relative; font-size: 4vw; font-weight: 500; letter-spacing: 0.08em; text-align: center; } } /* ================================================================================ 共通ボタン ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* リンク ----------------------------------------------- */ .link_common { margin-top: 20px; } .link_common ul { text-align: center; } .link_common ul li { display: inline-block; margin-left: 20px; margin-top: 20px; } .link_common ul li:first-of-type { margin-left: 0; } .link_common ul li a { position: relative; display: block; font-size: 17px; border-radius: 10px; color: #fff; text-align: center; font-weight: 500; width: 304px; padding: 13px 0 15px; letter-spacing: 0.08em; } .blue_btn ul li a:after { content: ''; position: absolute; background: url(../img/button_after.jpg) center top / contain no-repeat; top: 50%; right: 13px; width: 21.3px; height: 21.3px; margin-top: -10.65px; } .pink_btn ul li a:after { content: ''; position: absolute; background: url(../img/button02_after.jpg) center top / contain no-repeat; top: 50%; right: 13px; width: 21.3px; height: 21.3px; margin-top: -10.65px; } .blue_btn a { background-color: #20acca; } .pink_btn a { background-color: #fc86b5; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* リンク ----------------------------------------------- */ .link_common { margin-top: 6vw; } .link_common ul { text-align: center; } .link_common ul li { display: block; } .link_common ul li { margin-top: 2vw; } .link_common ul li:first-of-type { margin-top: 0; } .link_common ul li a { position: relative; display: block; font-size: 3.4vw; border-radius: 2.5vw; color: #fff; text-align: center; font-weight: 500; width: 60vw; padding: 3.3vw 0 3.5vw; letter-spacing: 0.08em; margin: 0 auto; } .blue_btn ul li a:after { content: ''; position: absolute; background: url(../img/button_after.jpg) center top / contain no-repeat; top: 50%; right: 5vw; width: 3.5vw; height: 3.5vw; margin-top: -1.75vw; } .pink_btn ul li a:after { content: ''; position: absolute; background: url(../img/button02_after.jpg) center top / contain no-repeat; top: 50%; right: 5vw; width: 3.5vw; height: 3.5vw; margin-top: -1.75vw; } .blue_btn a { background-color: #20acca; } .pink_btn a { background-color: #fc86b5; } } /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ここから各固定ページ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ 下層共通設定 ================================================================================ */ .num_no_link { pointer-events: none; color: #252525; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .box_white { background: #ffffff; padding: 40px; } .box_white h4 { font-size: 20px; font-weight: 500; letter-spacing: 0.08em; margin-bottom: 20px; color: #FB86B4; text-align: center; } .row_c02 .box_white h4 { color: #20acca; } .box_white ul { display: flex; flex-wrap: wrap; padding-left: 1em; } .box_white ul li { list-style: disc; width: 50%; padding-right: 2em; box-sizing: border-box; } .pc_center { text-align: center; } .c_box { border: solid 8px #EEFCFF; text-align: center; padding: 40px; } .c_box .c_txt { font-size: 20px; font-weight: 500; letter-spacing: 0.08em; color: #FB86B4; } .c_box .c_logo img { max-width: 300px; width: 100%; padding-top: 5px; } .c_box .c_tel { margin-top: -14px; } .c_box .c_tel a { font-size: 24px; font-weight: 500; color: #252525; letter-spacing: 0.075em; pointer-events: none; } .c_box .c_tel a span { font-size: 39px; letter-spacing: 0.11em; margin-left: 6px; } .c_box .c_time { font-size: 18px; color: #1297b4; font-weight: 500; letter-spacing: 0.097em; margin-top: -7px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .col_sp { margin-bottom: 4vw; } .box_white { background: #ffffff; padding: 5vw; } .box_white h4 { font-size: 3.8vw; font-weight: 500; letter-spacing: 0.08em; margin-bottom: 2vw; color: #FB86B4; line-height: 1.4; text-align: center; } .row_c02 .box_white h4 { color: #20acca; } .box_white ul { padding-left: 1em; } .box_white ul li { list-style: disc; } .c_box { border: solid 2vw #EEFCFF; text-align: center; padding: 4vw; } .c_box .c_txt { font-size: 4vw; font-weight: 500; letter-spacing: 0.08em; color: #FB86B4; } .c_box .c_logo img { max-width: 60vw; width: 100%; } .c_box .c_tel { margin-top: -4vw; } .c_box .c_tel a { font-size: 4vw; font-weight: 500; color: #252525; letter-spacing: 0.075em; } .c_box .c_tel a span { font-size: 7vw; letter-spacing: 0.11em; margin-left: 1.5vw; } .c_box .c_time { font-size: 3.8vw; color: #1297b4; font-weight: 500; letter-spacing: 0.097em; margin-top: -1vw; } } /* ================================================================================ 石戸谷小児科とは ================================================================================ */ .career_box { background: #E0F2F9; } .career_box strong { color: #1297b4; } .doctor_name strong { font-size: 130%; font-weight: 400; } .box_border.flow02 { border-color: #20ACCA; } .box_belongings { background: #FFE0EC; text-align: center; } .box_border.flow02 .box_belongings { background: #E0F2F9; } .box_border.flow02 .tit_flow h4 { color: #20ACCA; } .ol_flow { margin-left: 1em; } .ol_flow li { list-style: decimal; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .career_box { padding: 25px; } .box_belongings { padding: 15px; } .tit_flow h4 { font-size: 20px; font-weight: 500; letter-spacing: 0.08em; margin-bottom: 20px; color: #FB86B4; text-align: center; } .ol_flow li { padding-bottom: 5px; } .ol_flow li:last-child { padding-bottom: 0; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .career_box { padding: 4vw; } .box_belongings { padding: 2.5vw; } .tit_flow h4 { font-size: 3.8vw; font-weight: 500; letter-spacing: 0.08em; margin-bottom: 2vw; color: #FB86B4; line-height: 1.4; text-align: center; } .ol_flow li { padding-bottom: 2vw; } .ol_flow li:last-child { padding-bottom: 0; } } /* ================================================================================ 受付予約 ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .app_ol { max-width: 380px; width: 100%; margin-left: auto; margin-right: auto; } .app_ol ol { overflow: hidden; } .app_ol ol li { float: left; width: 50%; text-align: center; padding: 0 5%; box-sizing: border-box; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .app_ol { width: 100%; } .app_ol ol { overflow: hidden; } .app_ol ol li { float: left; width: 50%; text-align: center; padding: 0 5%; box-sizing: border-box; } } /* ================================================================================ 乳幼児健診 ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .schedule_table table { width: 100%; border-top: 1px dotted #FB86B4; background: #ffffff; } .schedule_table tr { border-bottom: 1px dotted #FB86B4; } .schedule_table th { width: 30% !important; font-size: 16px; text-align: center; padding: 12px; color: #FB86B4; } .schedule_table td { width: 70% !important; font-size: 16px; font-weight: normal; text-align: left; padding: 12px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .schedule_table table { width: 100%; border-top: 1px dotted #FB86B4; background: #ffffff; } .schedule_table tr { border-bottom: 1px dotted #FB86B4; } .schedule_table th { width: 100% !important; display: block; font-size: 3.2vw; text-align: center; padding: 2vw 2vw 0; color: #FB86B4; } .schedule_table td { width: 100% !important; display: block; font-size: 3.2vw; font-weight: normal; text-align: center; padding: 0.5vw 2vw 2vw; } } /* ================================================================================ アクセス ================================================================================ */ .gmap { position: relative; } .gmap iframe { width: 100%; } .map_box a { width: 100%; display: block; z-index: 1; position: absolute; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .gmap iframe, .map_box a { height: 450px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .gmap iframe, .map_box a { height: 250px; } }