@charset "UTF-8";
@media screen and (max-width: 999px) { .container { width: 100%; height: auto; margin: 0; }
  /*---------------------------------------------ヘッダー*/
  header { width: 100%; height: 110px !important; background: rgba(255, 255, 255, 0.85); position: fixed; z-index: 100; top: 0; left: 0; justify-content: center; align-content: center; }
  header h1 { font-size: 10px; font-weight: 300; position: absolute; top: 5px; left: 120px; margin: 0; padding: 0; }
  header #header_icon { width: 110px; height: 110px; position: absolute; top: 0; left: 0; }
  header #header_icon img { width: 100%; height: 100%; }
  header #header_logo { width: 152px; height: auto; position: absolute; left: 120px; bottom: auto; top: 30px; }
  header #header_logo img { width: 100%; height: auto; }
  header #header-menu { width: 100% !important; height: 55px; position: absolute; right: 10%; top: 0; display: flex; justify-content: flex-end; }
  header #header-menu .menu { width: 90px; height: 55px; text-align: center; margin-top: 55px; }
  header #header-menu .menu a { display: block; color: #000; }
  header #header-menu .menu a img { display: block; width: 90px; height: 22px; margin: 10px auto 0; }
  header #header-menu .menu a span { display: block; font-size: 12px; font-weight: 300; line-height: 1; margin-top: 2px; }
  header #header-menu .menu a span:hover { color: #00a059; }
  header #header-menu #contact { width: 90px; height: 55px; margin-top: 55px; text-align: center; background-color: #00a059; }
  header #header-menu #contact a { display: block; color: #fff; }
  header #header-menu #contact a img { display: block; width: 90px; height: 22px; margin: 10px auto 0; }
  header #header-menu #contact a span { display: block; font-size: 12px; font-weight: 300; line-height: 1; margin-top: 2px; }
  header #header-menu #contact:hover { opacity: 0.8; }
  #index_menu { width: 100%; }
  footer { width: 100%; }
  footer #footer_contents { width: 96%; margin-right: auto; margin-left: auto; }
  #message_box { padding: 250px 5% 50px; box-sizing: border-box; }
  #message_box h2 { font-size: 20px; }
  #message_box #message_img { width: 100%; height: auto; background-image: url("../images/sp/message_bg.png"); background-repeat: no-repeat; background-position: top center; background-size: 150%; position: relative; margin: 0 auto; padding-top: 130px; }
  #message_box #message_img #massage_name { width: 100%; left: 0; padding: 5px 20px; box-sizing: border-box; margin: 0 auto; background-color: #000; color: #fff; position: absolute; bottom: 25%; text-align: center; }
  #message_box #message_img #massage_name p { margin: 0; padding: 0; font-size: 12px; position: relative; }
  #message_box #message_img #massage_name h5 { margin: 0; padding: 0; font-size: 20px; position: relative; align-items: center; }
  #message_box #message_img #massage_name h5 span { font-size: 10px; margin-right: 10px; }
  #message_box .whbox { width: 80%; height: auto; padding: 20px 30px; font-size: 14px; line-height: 2; } }
@media screen and (max-width: 767px) { body { max-width: 100vw; font-size: 14px !important; }
  .pc-display { display: none; }
  .sp-display { display: inherit; }
  /*---------------------------------------------ページ共通*/
  .flexbox { display: flex; flex-direction: row; }
  .vbox { display: flex; flex-direction: column; }
  .container { width: 100%; height: auto; margin: 0; }
  #pagetitle { width: auto; height: 50px; display: inline-block; position: absolute; top: 120px; left: 50%; transform: translate(-50%, -50%); }
  #pagetitle img { width: auto; height: 100%; }
  /*---------------------------------------------ヘッダー*/
  header { width: 100%; height: 55px !important; box-sizing: border-box; background: rgba(255, 255, 255, 0.85); position: fixed; display: flex; align-items: stretch; z-index: 100; top: 0; left: 0; justify-content: center; align-content: center; }
  header h1 { display: none !important; }
  header #header_icon { width: 55px; height: 55px; aspect-ratio: 1 / 1; position: absolute; top: 0; left: 0; }
  header #header_icon img { width: 100%; height: 100%; }
  header #header_logo { width: 100px; height: auto; position: absolute; display: block; left: calc((100% / 7) + 5px); top: 5px; }
  header #header_logo img { width: 100%; height: auto; }
  header #header-menu { width: calc(100% - (100% / 7)) !important; display: flex; justify-content: flex-end !important; align-items: stretch; right: 0; top: 0; display: flex; justify-content: flex-end; }
  header #header-menu .menu { width: calc(100% / 6); height: auto; display: flex; align-items: center; justify-content: flex-start; text-align: center; padding-top: 0; margin-top: 25px; }
  header #header-menu .menu a { display: block; color: #000; }
  header #header-menu .menu a img { display: block; width: 100%; height: auto; margin: 0 auto 0; }
  header #header-menu .menu a span { display: block; font-size: 8px; font-weight: 300; line-height: 1; margin-top: 2px; }
  header #header-menu .menu a span:hover { color: #00a059; }
  header #header-menu #contact { width: calc(100% / 6); height: auto; margin-top: 20px; text-align: center; background-color: #00a059; justify-content: flex-end; padding: 10px 0 5px 0; }
  header #header-menu #contact a { display: block; color: #fff; }
  header #header-menu #contact a img { display: block; width: 100%; height: auto; margin: -5px 0 auto 0; padding: 0; }
  header #header-menu #contact a span { display: block; font-size: 8px; font-weight: 300; line-height: 1; margin-top: 0; }
  header #header-menu #contact:hover { opacity: 0.8; }
  /*---------------------------------------------トップページ*/
  #index_main { width: 100%; height: 75vh; background-image: url("../images/index_main.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; top: 0; left: 0; }
  #index_main h2 { position: absolute; z-index: 99; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline; color: #fff; text-shadow: 0 0 5px #000; font-size: 28px; white-space: nowrap; overflow: hidden; font-weight: 900; text-align: center; }
  #index_h3 { width: 100%; height: auto; padding: 36px 5px 18px 5px; box-sizing: border-box; margin-bottom: 50px; text-align: center; color: #fff; }
  #index_h3 h3 { font-size: 16px; margin: 0 0 13px 0; }
  #index_h3 p { font-size: 12px; }
  #index_menu { width: 100%; height: auto; flex-wrap: wrap; margin: 0 auto; padding: 0 8px; box-sizing: border-box !important; display: flex; justify-content: space-between; }
  #index_menu .index_menu_box { width: 100%; height: auto; background-color: #fff; position: absolute; right: 0; top: 102px; }
  #index_menu .index_menu_box img { width: 100%; height: auto; }
  #index_menu #index_menu_01, #index_menu #index_menu_02, #index_menu #index_menu_03, #index_menu #index_menu_04 { display: flex; flex-direction: column; width: 45%; height: 300px; padding: 102px 0 0 0; box-sizing: border-box; margin: 0 auto 30px !important; box-sizing: border-box; position: relative; background-position: left top; background-repeat: no-repeat; background-size: 100%; position: relative; }
  #index_menu h4 { font-size: 12px; margin: -12px 0 0 5px; padding: 0; color: #000; }
  #index_menu .index_menu_text { font-size: 12px; width: 96%; height: auto; margin: 15px auto; color: #000; }
  #index_menu .index_menu_btn { width: 100%; height: 20px; color: #fff; font-size: 15px; text-align: center; line-height: 20px; padding: 1px 0; position: static; margin-top: auto; }
  #index_menu .index_menu_btn a { color: #fff; }
  /*---------------------------------------------フッター*/
  footer { width: 100%; height: auto; margin: 50px auto 15px auto; }
  footer #footer_contents { width: 80%; height: auto; display: flex; margin: 0 auto 14px; position: relative; border-bottom: none !important; }
  footer #footer_contents::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100vw; border-bottom: solid 1px #000; }
  footer #footer_contents #footer_icon { width: 15%; height: auto; justify-content: flex-end; }
  footer #footer_contents #footer_icon img { width: 100%; height: auto; }
  footer #footer_contents .vbox { width: 90%; height: auto; margin: 0 auto 10px; }
  footer #footer_contents .vbox #footer_logo { width: 40%; height: auto; margin-left: 10px; }
  footer #footer_contents .vbox #footer_logo img { width: 100%; height: auto; }
  footer #footer_contents .vbox #footer_add { width: 100%; height: auto; display: flex; justify-content: space-between; flex-direction: column; margin-left: 10px; font-size: 10px; }
  footer #footer_contents .vbox #footer_add div { width: 100%; }
  footer #footer_contents .vbox #footer_add div span { margin-left: 1.6rem; }
  footer #footer_nav { width: 90%; height: auto; display: flex; flex-direction: row; justify-content: center; font-size: 10px; margin: 0 auto 15px auto; text-align: center; }
  footer #footer_nav > div { white-space: nowrap; padding: 0; margin: 0; }
  footer #footer_nav > div:nth-child(-n+5) { width: 20%; }
  footer #footer_nav > div:nth-child(n+6) { width: auto; }
  footer #footer_nav > div::after { content: " ︱ "; }
  footer #footer_nav > div:nth-child(5)::after, footer #footer_nav > div:nth-child(7)::after { content: ""; }
  footer #copyright { text-align: center; font-size: 8px; }
  /*---------------------------------------------ごあいさつ*/
  #message_box { width: 100%; height: auto; background: linear-gradient(to bottom, #a7bbba 35%, transparent 35%); background-position: top; padding: 180px 0 450px 0; overflow: hidden; position: relative; }
  #message_box h2 { width: 90%; height: auto; display: inline-block; position: relative; font-size: 22px; color: #fff; line-height: 2; margin: 0 30px; }
  #message_box #message_img { width: 100%; height: auto; background-image: url("../images/sp/message_bg.png"); background-repeat: no-repeat; background-position: top center; background-size: contain; position: relative; margin: 0 auto; padding-top: 320px; }
  #message_box #message_img #massage_name { width: 100%; left: 0; padding: 5px 20px; box-sizing: border-box; margin: 0 auto; background-color: #000; color: #fff; position: absolute; bottom: 0; text-align: center; }
  #message_box #message_img #massage_name p { margin: 0; padding: 0; font-size: 12px; position: relative; }
  #message_box #message_img #massage_name h5 { margin: 0; padding: 0; font-size: 20px; position: relative; align-items: center; }
  #message_box #message_img #massage_name h5 span { font-size: 10px; margin-right: 10px; }
  #message_box .whbox { width: 100%; height: 380px; padding: 0 30px 0 30px; box-sizing: border-box; font-size: 16px; line-height: 2; position: absolute; bottom: 0; }
  #message_box .flexbox { display: block; }
  /*---------------------------------------------会社情報*/
  #company_box #pageheader { width: 100%; height: 180px; background-image: url("../images/company_bg.jpg"); background-repeat: no-repeat; background-position: top; background-size: 100% 200px; padding: 100px 0 0 0; box-sizing: border-box; }
  #company_box .container { margin-top: 60px; font-weight: 12px !important; }
  #company_box .container .company_title { display: flex; }
  #company_box .container .company_title span { width: 140px; height: 20px; display: inline-block; background-color: #a7bbba; color: #fff; text-align: right; padding: 0 5px 0 0; font-size: 12px; }
  #company_box .container .company_title h4 { width: 100%; display: inline-block; font-size: 16px; color: #bc64a4; border-left: solid 1px #a7bbba; border-bottom: solid 1px #a7bbba; box-sizing: border-box; margin: 0 0 30px 0; padding: 0; line-height: 40px; text-indent: 5px; }
  #company_box .container .company_contents { margin-bottom: 40px; margin-left: 5%; margin-right: 5%; }
  #company_box .container .company_contents .flexbox { margin-bottom: 15px; }
  #company_box .container .company_contents .company_pic { font-weight: 600; margin-right: 100px; white-space: nowrap; }
  #company_box .container .company_contents .company_pic_l { font-weight: 600; width: 48%; margin-right: 4%; font-size: 12px; }
  #company_box .container .company_contents .company_pic_r { font-weight: 600; width: 48%; font-size: 12px; }
  #company_box #gmap { width: 100%; height: 500px; margin-top: 5px; }
  #company_box #gmap iframe { width: 100%; height: 500px; }
  /*---------------------------------------------サービス*/
  #service_box #pageheader { width: 100%; height: 180px; background-image: url("../images/service_bg.jpg"); background-repeat: no-repeat; background-position: top left 40%; background-size: 200%; padding: 180px 0 0 0; box-sizing: border-box; }
  #service_box .container { width: 96%; margin: 16px auto 0; }
  #service_box .container .service_contents { display: flex; border-bottom: solid 1px #000; padding-bottom: 0; margin-bottom: 30px; position: relative; }
  #service_box .container .service_contents .service_no { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; font-size: 80px; font-weight: 900; color: rgba(51, 153, 204, 0.3); transform: scaleX(75%); margin-top: -20px; position: absolute; left: -20px; z-index: -1; }
  #service_box .container .service_contents .service_container { left: 2%; margin-right: 0; }
  #service_box .container .service_contents .service_container h2 { font-size: 28px; margin: 0; padding: 0; }
  #service_box .container .service_contents .service_container p { margin-bottom: 50px; }
  #service_box .container .service_contents .service_container .service_com { width: 50%; }
  #service_box .container .service_contents .service_container .service_com .service_com_title { width: 100%; text-align: center; background-color: #000; color: #fff; font-weight: 700; padding: 5px 0; text-align: center; }
  #service_box .container .service_contents .service_container .service_com ul { margin: 10px 0 30px 0; padding: 0; }
  #service_box .container .service_contents .service_container .service_com ul li { margin: 0 0 5px 1rem; padding: 0; list-style: square; }
  #service_box .container .service_contents .service_container .service_com ul li.small_list { list-style: none; font-size: 11px; position: relative; padding-left: 1rem; margin-left: 0; text-align: left; margin-bottom: 5px; }
  #service_box .container .service_contents .service_container .service_com ul li.small_list::before { content: "※"; position: absolute; left: 0; top: 0; }
  #service_box .container .service_contents .service_container .service_img { display: flex; width: calc(50% - 10px); height: auto; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; margin: 0 0 30px 10px; gap: 0; }
  #service_box .container .service_contents .service_container .service_img img { width: 100%; height: auto; margin-bottom: 3px; }
  #service_box .container .service_contents .service_container .service_img_w { display: block; width: calc(50% - 10px); height: auto; margin-left: 10px; }
  #service_box .container .service_contents .service_container .service_img_w img { width: 100%; height: auto; margin-bottom: 3px; }
  #service_box .container .service_contents_07 { border-bottom: none !important; }
  /*---------------------------------------------施工実績*/
  #works_box #pageheader { width: 100%; height: 180px; background-image: url("../images/works_bg.jpg"); background-repeat: no-repeat; background-position: center; background-size: 200%; padding: 180px 0 0 0; box-sizing: border-box; }
  #works_box .container { margin-top: 60px; }
  #works_box .container h3 { font-size: 20px; color: #ff9900; text-align: center; margin-bottom: 50px; }
  #works_box .container #works_img { width: 100%; height: auto; display: flex; flex-wrap: wrap; gap: 10px; }
  #works_box .container #works_img img { width: calc((100% - 20px) / 3); height: auto; }
  /*---------------------------------------------プライバシーポリシー*/
  #policy_box #pageheader { width: 100%; height: 180px; background-image: url("../images/policy_bg.jpg"); background-repeat: no-repeat; background-position: bottom right; background-size: 100%; padding: 180px 0 0 0; box-sizing: border-box; }
  #policy_box .container { width: 92%; margin: 60px auto 0 auto; }
  #policy_box .container h3 { font-size: 20px; text-align: center; border-bottom: solid 1px #000; margin-bottom: 50px; padding-bottom: 5px; }
  #policy_box .container .policy_listtitle { font-size: 18px; font-weight: 700; color: #00a159; margin-bottom: 5px; }
  #policy_box .container p { margin: 0; padding: 0; line-height: 1.8; }
  #policy_box .container p.policy_last { margin: 0 0 60px 0; padding: 0; line-height: 1.8; }
  #policy_box .container ul { margin: 0 0 60px 0; padding: 0; }
  #policy_box .container ul li { margin: 0; padding: 0; line-height: 2.0; list-style-position: inside; }
  /*---------------------------------------------お問い合わせ*/
  #contact_box { letter-spacing: 1px; }
  #contact_box #pageheader { width: 100%; height: 180px; background-image: url("../images/contact_title.jpg"); background-repeat: no-repeat; background-position: bottom 60% center; background-size: 100%; padding: 180px 0 0 0; box-sizing: border-box; }
  #contact_box .container { width: 92%; margin: 60px auto 0 auto; }
  #contact_box .container h3 { font-size: 20px; text-align: center; color: #00a159; margin-bottom: 20px; }
  #contact_box .container .bold { text-align: center; margin-bottom: 50px; }
  #contact_box .container #formtable { width: 100%; height: auto; margin: 30px 0; }
  #contact_box .container #formtable div { margin-bottom: 10px; }
  #contact_box .container #formtable div.inputname { margin-bottom: 2px; }
  #contact_box .container #formtable .input_box { width: 100%; height: auto; padding: 10px 3px; border: solid 1px #000; margin-bottom: 15px; font-size: 18px; line-height: 1.3; }
  #contact_box .container #formtable .input_box_s { width: 100%; height: auto; padding: 10px 3px; border: solid 1px #000; margin-bottom: 5px; font-size: 18px; line-height: 1.3; }
  #contact_box .container #formtable .small_info { font-size: 0.9rem; margin: 0; padding: 0; }
  #contact_box .container #formtable .required { color: #ff0000; margin-left: 20px; }
  #contact_box .container #formtable #pp_check { position: relative; align-content: center; }
  #contact_box .container #formtable #pp_check a { color: #00a159; text-decoration: underline; }
  #contact_box #thanks { width: 100%; height: 300px; display: grid; place-items: center; text-align: center; }
  #pp_check { width: auto; height: auto; display: block; margin-bottom: 20px !important; }
  #pp_check input[type="checkbox"] { display: none; }
  #pp_check .checkbox { position: relative; padding-left: 26px; cursor: pointer; display: inline-block; line-height: 16px; }
  #pp_check .checkbox::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 2px solid #ccc; border-radius: 6px; background: #fff; transition: 0.2s; }
  #pp_check input[type="checkbox"]:checked + .checkbox::before { background: #00a159; border-color: #00a159; }
  #pp_check .checkbox::after { content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-65%) rotate(45deg); width: 7px; height: 12px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; opacity: 0; transition: 0.2s; }
  #pp_check input[type="checkbox"]:checked + .checkbox::after { opacity: 1; }
  #pp_check a { color: #00a159; text-decoration: none; }
  .material-symbols-outlined { font-size: 16px; vertical-align: middle; }
  .material-symbols-outlined { vertical-align: middle; margin-right: 5px; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }
  .submit_style { font-size: 18px; color: #fff; background-color: #00a159; border: none; padding: 5px 30px; margin-right: 5px; }
  .submit_style:hover { cursor: pointer; background-color: #000; }
  .reset_style { font-size: 18px; color: #fff; background-color: #a7bbba; border: none; padding: 5px 30px; margin-left: 5px; }
  .reset_style:hover { cursor: pointer; background-color: #000; } }
@media screen and (max-width: 375px) { body { font-weight: 12px !important; }
  /*---------------------------------------------ごあいさつ*/
  #message_box { width: 100%; height: auto; background: linear-gradient(to bottom, #a7bbba 60%, transparent 60%); background-position: top; padding: 180px 0 450px 0; overflow: hidden; }
  #message_box h2 { width: 90%; height: auto; display: inline-block; position: relative; font-size: 22px; color: #fff; line-height: 2; margin: 0 30px; }
  #message_box #message_img { width: 100%; height: auto; background-image: url("../images/sp/message_bg.png"); background-repeat: no-repeat; background-position: top center; background-size: 60%; position: relative; margin: 0 auto; padding-top: 320px; }
  #message_box #message_img #massage_name { width: 100%; left: 0; padding: 5px 20px; box-sizing: border-box; margin: 0 auto; background-color: #000; color: #fff; position: absolute; bottom: 0; text-align: center; }
  #message_box #message_img #massage_name p { margin: 0; padding: 0; font-size: 12px; position: relative; }
  #message_box #message_img #massage_name h5 { margin: 0; padding: 0; font-size: 20px; position: relative; align-items: center; }
  #message_box #message_img #massage_name h5 span { font-size: 10px; margin-right: 10px; }
  #message_box .whbox { width: 100%; height: 400px; padding: 0 30px 0 30px; margin-top: 560px; box-sizing: border-box; font-size: 16px; line-height: 2; position: absolute; bottom: auto; }
  #message_box .flexbox { display: block; }
  #contact_box #thanks { width: 100%; height: 180px; display: grid; place-items: center; text-align: center; } }