@charset "Shift_JIS";

/* googleƒtƒHƒ“ƒg */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');

/*common*/
body.renew_page.renew2024 #contents { padding-bottom: 0; }
body.renew_page.renew2024 #contents #contents_wrapper { width: auto; }
body.renew_page.renew2024 #contents #contents_wrapper * { box-sizing: border-box; }
body.renew_page.renew2024 #contents #contents_wrapper img { width: 100%; }

@media screen and (max-width:640px){
    body.renew_page #contents #contents_wrapper { margin: 0; }
}

/*title_sec*/
#main_title_sec { background: #fcf564; padding: 30px 20px 50px; }
#main_title_sec h1 { width: 504px; margin: 0 auto; }
#main_title_sec #titleArea { background: #fff; border-radius: 50px; width: 1160px; margin: 15px auto 0; display: flex; justify-content: space-between; box-shadow: 0px 6px 5px 3px rgba(0, 0, 0, .2); }

#main_title_sec #main_txt { width: 525px; padding: 40px 30px 0; }
#main_title_sec #main_txt #vol { background: url("/sumai/hirameki/images/common_bg_tag.png") no-repeat left center / contain; font-weight: bold; font-size: 120%; text-align: center; width: 250px; min-height: 50px; padding: 7px 0; }
#main_title_sec #main_txt h2 { margin: 15px 0 0 15px; color: #0254a4; font-family: "Zen Maru Gothic", sans-serif; font-weight: bold; line-height: 1.4; font-size: 200%; border: none; background: url("/sumai/hirameki/images/common_bg_line_wave.png") no-repeat bottom left 10px /94%; }
#main_title_sec #main_txt p { margin: 20px 90px 0 35px !important; position: relative; }
#main_title_sec #main_txt p::after { position: absolute; content: ""; display: block; width: 70px; height: 70px; background: url("/sumai/hirameki/images/common_img_book.png") no-repeat center center / 100%; right: -80px; bottom: -5px; }
#main_title_sec #main_txt ul { display: flex; flex-wrap: wrap; margin: 10px 0 0 35px; }
#main_title_sec #main_txt ul li { margin-top: 10px; }
#main_title_sec #main_txt ul li a { border: 1px solid #0254a4; display: inline-block; padding: 0 10px 2px; margin-right: 10px; border-radius: 8px; font-size: 100%; transition: background .4s; }
#main_title_sec #main_txt ul li a:hover { background: #0254a4; color: #fff; opacity: 1; }

#main_title_sec #main_img { width: 640px; border-radius: 0 50px 50px 0; overflow: hidden; }

@media screen and (max-width:640px){
    #main_title_sec { padding: 15px 20px 20px; }
    #main_title_sec h1 { width: 100%; }
    #main_title_sec #titleArea { border-radius: 20px; width: 100%; display: block; }

    #main_title_sec #main_txt { width: 100%; padding: 10px 5px 0; }
    #main_title_sec #main_txt #vol { font-size: 3.6vw; width: 32vw; padding: 4vw 0 4vw 6%; }
    #main_title_sec #main_txt h2 { margin: 0 0 0 15px; padding-bottom: 4%; font-size: 165%; line-height: 1.25; background: url("/sumai/hirameki/images/common_bg_line_wave.png") no-repeat bottom left 0 / 96%; }
    #main_title_sec #main_txt p { margin: 10px 20px 0 !important; font-size: 90%; }
    #main_title_sec #main_txt p::after { width: 60px; height: 60px; right: 10px; bottom: -35px; }
    #main_title_sec #main_txt ul { margin: 30px 0 0 15px; }
    #main_title_sec #main_txt ul li a { margin-right: 4px; font-size: 80%; }

    #main_title_sec #main_img { width: 100%; border-radius: 0 0 20px 20px; margin-top: 20px; }
}

/*intro_sec*/
#intro_sec { display: flex; align-items: flex-start; justify-content: center; }

#intro_sec #pro_area { width: 500px; margin: 100px 20px 0; background: url("/sumai/hirameki/images/common_bg_book.png") no-repeat center top / 100%; position: relative; }
#intro_sec #pro_area h3 { position: absolute; left: -15px; top: -35px; background: #d6f8ff; margin: 0; padding: 10px 40px; border-radius: 100px; font-family: "Zen Maru Gothic", sans-serif; line-height: 1.4; text-align: center; font-size: 120%; font-weight: bold; }
#intro_sec #pro_area h3::after { position: absolute; content: ""; right: 20px; bottom: -20px; width: 60px; height: 20px; background-color: #d6f8ff; clip-path: polygon(50% 20px, 0% 0%, 25px 0%); }
#intro_sec #pro_area ul { display: flex; flex-wrap: wrap; justify-content: space-between; width: 83%; margin: 30px auto 60px; }
#intro_sec #pro_area ul li { width: 46%; margin-top: 30px; }
#intro_sec #pro_area ul li img { margin-bottom: 5px; }

#intro_sec #q_area { width: 500px; margin: 80px 20px; background: #fefcd3; padding: 40px 10px 10px; }
#intro_sec #q_area #q_base { position: relative; border: 2px solid #000; background: #fff; padding: 15px 30px 30px; }
#intro_sec #q_area #q_base::before { position: absolute; right: 20px; top: -30px; content: ""; display: block; width: 30px; height: 50px; background: url("/sumai/hirameki/images/common_q_img_pin.png") no-repeat center center / 100%; }
#intro_sec #q_area #q_base::after { position: absolute; right: -50px; bottom: -40px; content: ""; display: block; width: 100px; height: 100px; background: url("/sumai/hirameki/images/common_q_img_check.png") no-repeat center center / 100%; }
#intro_sec #q_area #q_base h3 { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); margin: 0; }
#intro_sec #q_area #q_base ul li a { display: block; position: relative; color: #0254a4; font-family: "Zen Maru Gothic", sans-serif; font-weight: bold; font-size: 130%; padding: 15px 0 20px 60px; background: url("/sumai/hirameki/images/common_q_line_dot.png") no-repeat center bottom / 94%; }
#intro_sec #q_area #q_base ul li a span { position: absolute; left: 5px; top: 5px; background: url("/sumai/hirameki/images/common_bg_no.png") no-repeat center center / 100%; padding: 13px 15px 15px; color: #000; line-height: 1; }
#intro_sec #q_area .img_box { display: flex; justify-content: center; width: 100%; margin: 0 auto ; }
#intro_sec #q_area .img_box div { width: 40%; border-radius: 10px; overflow: hidden; margin: 20px 10px 0; }

@media screen and (max-width:640px){
    #intro_sec { display: block; }

    #intro_sec #pro_area { width: 84%; margin: 50px auto 0; min-height: 60vw; }
    #intro_sec #pro_area h3 { top: -35px; padding: 6px 30px; font-size: 110%; }
    #intro_sec #pro_area h3::after { right: 50px; width: 60px; height: 20px; }
    #intro_sec #pro_area ul li { margin-top: 40px; }

    #intro_sec #q_area { width: calc(100% - 30px); margin: 20px 15px; padding-top: 30px; }
    #intro_sec #q_area #q_base { padding: 15px 30px 30px; }
    #intro_sec #q_area #q_base::before { right: 10px; top: -24px; width: 20px; height: 40px; }
    #intro_sec #q_area #q_base::after { right: 20px; bottom: -24px; width: 60px; height: 60px; }
    #intro_sec #q_area #q_base h3 { top: -20px; left: 50%; transform: translateX(-50%); margin: 0; max-width: 200px; }
    #intro_sec #q_area #q_base ul { margin-top: 3vw; }
    #intro_sec #q_area #q_base ul li a { font-size: 100%; padding: 10px 0 14px 30px; background-size: 100%; }
    #intro_sec #q_area #q_base ul li a span { left: -5px; top: 7px; padding: 8px 10px 10px; font-size: 80%; }
    #intro_sec #q_area .img_box div { margin-top: 12px; }
}

/*main_contents_sec*/
#main_contents_sec { background: #fefcd3; padding: 80px 0 0; }

#main_contents_sec #contents_area { background: url("/sumai/hirameki/images/common_bg_plaid.gif") #fff; width: 1000px; margin: 0 auto; border-radius: 60px; padding: 30px 90px 90px; box-shadow: 0px 6px 5px 3px rgba(0, 0, 0, .1); }
#main_contents_sec #contents_area h2 { margin: 0 auto; padding: 8px 0 10px; border: none; position: relative; background: #d6f8ff; border-radius: 100px; font-family: "Zen Maru Gothic", sans-serif; font-weight: bold; font-size: 170%; color: #0254a4; text-align: center; width: 600px; }
#main_contents_sec #contents_area h2 .contents_no { position: absolute; left: -90px; top: -17px; font-size: 120%; background: url("/sumai/hirameki/images/common_bg_no.png") no-repeat center center / 100%; padding: 20px 22px 22px; color: #000; }
#main_contents_sec #contents_area h2 .sub_copy { position: absolute; font-size: 70%; top: -36px; left: 50%; transform: translateX(-50%); width: 600px; }
#main_contents_sec #contents_area h2::after { position: absolute; content: ""; left: 150px; bottom: -19px; width: 60px; height: 20px; background-color: #d6f8ff; clip-path: polygon(50% 20px, 0% 0%, 25px 0%); }

#main_contents_sec #contents_area .contents_inner { padding-top: 50px; }
#main_contents_sec #contents_area .contents_inner + .contents_inner { margin-top: 90px; }

#main_contents_sec #contents_area .img_box { width: 640px; margin: 30px auto 0 !important; }

#main_contents_sec #contents_area .talk_box { display: flex; justify-content: space-between; margin-top: 30px; }
#main_contents_sec #contents_area .talk_box .face_img { width: 80px; }
#main_contents_sec #contents_area .talk_box p { width: calc(100% - 100px); margin: 0; padding-right: 80px; }
#main_contents_sec #contents_area .talk_box p .txt_line { background: #fcf564; }
#main_contents_sec #contents_area .talk_box + .talk_box { margin-top: 50px; }

#main_contents_sec #contents_area .fix_txt { font-size: 200%; color: #fff; text-align: center; margin-top: 60px; font-family: "Zen Maru Gothic", sans-serif; font-weight: bold; }
#main_contents_sec #contents_area .fix_txt span { background: #0254a4; padding: 0 0 5px; line-height: 2.1; }
#main_contents_sec #contents_area .fix_txt span.p_l { padding-left: 20px; }
#main_contents_sec #contents_area .fix_txt span.p_r { padding-right: 20px; }

#main_contents_sec #dog_txt { text-align: center; }
#main_contents_sec #dog_txt p { position: relative; margin: 80px 80px 15px 0; border-radius: 24px; color: #0254a4; font-size: 110%; font-family: "Zen Maru Gothic", sans-serif; font-weight: bold; text-align: center; background: #fff; border: 2px solid #000; display: inline-block; padding: 14px 22px 16px; line-height: 1.4; }
#main_contents_sec #dog_txt p::after { position: absolute; right: -88px; top: 0px; content: ""; display: block; width: 90px; height: 100px; background: url("/sumai/hirameki/images/common_img_dog.png") no-repeat center center / 100%; }

@media screen and (max-width:640px){
    #main_contents_sec { padding: 30px 0 0; }

    #main_contents_sec #contents_area { width: 100%; border-radius: 0; padding: 10px 20px 60px; }
    #main_contents_sec #contents_area h2 { font-size: 130%; width: 90%; max-width: 300px; }
    #main_contents_sec #contents_area h2 .contents_no { left: -20px; top: -14px; padding: 10px 12px 12px; }
    #main_contents_sec #contents_area h2 .sub_copy { top: -22px; width: 90%; }

    #main_contents_sec #contents_area .contents_inner { padding-top: 30px; }
    #main_contents_sec #contents_area .contents_inner + .contents_inner { margin-top: 50px; }

    #main_contents_sec #contents_area .img_box { width: 100%; margin: 30px auto 0 !important; }

    #main_contents_sec #contents_area .talk_box .face_img { width: 60px; }
    #main_contents_sec #contents_area .talk_box p { width: calc(100% - 74px); padding-right: 0; font-size: 96%; }
    #main_contents_sec #contents_area .talk_box + .talk_box { margin-top: 30px; }

    #main_contents_sec #contents_area .fix_txt { font-size: 130%; margin-top: 30px; }
    #main_contents_sec #contents_area .fix_txt span { background: #0254a4; padding: 0 20px 5px; }
    
    #main_contents_sec #dog_txt p { margin-top: 30px; font-size: 100%; padding: 10px 16px 12px; }
    #main_contents_sec #dog_txt p::after { right: -68px; top: 0px; width: 70px; height: 85px; }

}

/*products_sec*/
#products_sec { background: #fcf564; padding: 50px 0; text-align: center; }
#products_sec h2 { margin: 0 !important; border: none !important; text-align: center; font-weight: bold !important; padding: 0 !important; }

body.renew_page #contents h2 + .products_slider { margin-top: 30px !important; }
#products_sec .products_slider { text-align: center; }
#products_sec .products_slider .products_slider_list { display: inline-block; background: #fff; border: 1px solid #0254a4; text-align: center; padding: 15px 15px 30px; width: 500px; margin: 20px 20px 0; }
#products_sec .products_slider .products_slider_list .products_info { color: #000; }
#products_sec .products_slider .products_slider_list .products_info span { font-size: 120%; font-weight: bold; }
#products_sec .products_slider .products_slider_list .products_img { margin-top: 15px; }
#products_sec .products_slider .products_slider_list .produts_btn { background: #0254a4; color: #fff; margin-top: 30px; padding: 15px; font-size: 110%; width: 300px; display: inline-block; border-radius: 60px; }

@media screen and (max-width:640px){
    #products_sec { padding: 20px; }
    body.renew_page #contents h2 + .products_slider { margin-top: 0 !important; }
    #products_sec .products_slider .products_slider_list { width: 100%; margin: 20px 0 0; }
    #products_sec .products_slider .products_slider_list .produts_btn { padding: 7px; font-size: 110%; width: 220px; }
}

/*link_sec*/
#link_sec { text-align: center; padding: 80px; }
#link_sec .btn_hirameki a { position: relative; display: inline-block; background: #fcf564; border: 2px solid #000; color: #000 !important; font-weight: bold; font-size: 160%; line-height: 1.4; width: 540px; padding: 10px; border-radius: 100px; }
#link_sec .btn_hirameki a::before { position: absolute; left: -20px; top: -40px; content: ""; display: block; width: 170px; height: 140px; background: url("/sumai/hirameki/images/common_img_link_house.png") no-repeat center center / 100%; }
#link_sec .btn_hirameki a::after { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); content: ""; display: block; width: 35px; height: 35px; background-color: #000; clip-path: polygon(70% 50%, 0 0, 0 100%); }

@media screen and (max-width:640px){
    #link_sec { text-align: center; padding: 30px 30px 50px; }
    #link_sec .btn_hirameki a { font-size: 120%; width: 100%; max-width: 340px; padding: 10px; }
    #link_sec .btn_hirameki a::before { left: -20px; top: -20px; width: 100px; height: 80px; }
    #link_sec .btn_hirameki a::after { right: 20px; width: 20px; height: 20px; }
}